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What will you learn from this book? 

Tired of reading HTML books that only make sense after you’re an expert? 
Then it’s about time you picked up the newly revised Head First HTML and 
CSS and really learned HTML. You want to learn HTML and CSS so you 
can finally create those web pages you’ve always wanted, so you can commu¬ 
nicate more effectively with friends, family, fans, and fanatic customers. You 
also want to do it right, using the latest HTML5 standards, so you can actu¬ 
ally maintain and expand your web pages over time so they work in all 
browsers and mobile devices. 
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What’s so special about this book? 

In this book, you’ll learn the real secrets of creating web pages, and, most 
importantly, you’ll learn them in a way that won’t put you to sleep. If you’ve 
read a Head First book, you know what to expect: a visually rich format 
designed for the way your brain works. Using the latest research in neurobi¬ 
ology, cognitive science, and learning theory, this book will load HTML and 
CSS into your brain in a way that sticks. 
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Head First HTML and 
CSS is a thoroughly 
modern introduction 
to forward-looking 
practices in web page 
markup and presenta¬ 
tion. It correctly antici¬ 
pates readers , puzzle¬ 
ments and handles 
them just in time. Tlie 
highly graphic and 
incremental approach 
precisely mimics the 
best way to learn this 
stuff ： make a small 
change and see it in the 
browser to understand 
what each, new item 
means.” 

—— Danny Goodman ， 
author ^/'Dynamic HTML: 

The Definitive Guide 

The information covered 
in this book is the same 
material the pros know, 
but taught in an edu¬ 
cational and humorous 
manner that doesn’t 
ever make you think 
the material is impossi¬ 
ble to learn or you are 
out of your element.” 

—— Christopher Schmitt ， 
author of The CSS Cook¬ 
book and Professional CSS 



















































Praise for Head First HTML and CSS 


“Head First HTML and CSS is a thoroughly modern introduction to forward-looking practices in 
web page markup and presentation. It correctly anticipates readers’ puzzlements and handles 
them just in time. The highly graphic and incremental approach precisely mimics the best way 
to learn this stuff: make a small change and see it in the browser to understand what each new 
item means.” 

— Danny Goodman, author of Dynamic HTML: The Definitive Guide 


“Eric Freeman and Elisabeth Robson clearly know their stuff. As the Internet becomes more com¬ 
plex, inspired construction of web pages becomes increasingly critical. Elegant design is at the core 
of every chapter here, each concept conveyed with equal doses of pragmatism and wit.” 

— Ken Goldstein, Executive Vice President and 
Managing Director, Disney Online 


“The Web would be a much better place if every HTML author started off by reading this 
book.” 

— L. David Baron, Technical Lead, Layout and CSS 5 Mozilla Corporation 
http: / / dbaron. org/ 

“I’ve been writing HTML and CSS for 10 years now, and what used to be a long trial-and- 
error learning process has now been reduced neatly into an engaging paperback. HTML used 
to be something you could just hack away at until things looked okay on screen, but with the 
advent of web standards and the movement toward accessibility, sloppy coding practice is not 
acceptable anymore.. .from a business standpoint or a social responsibility standpoint. Head 
First HTML and CSS teaches you how to do things right from the beginning without making the 
whole process seem overwhelming. HTML, when properly explained, is no more complicated 
than plain English, and the authors do an excellent job of keeping every concept at eye level.” 

一 Mike Davidson，President and CEO, Newsvine ， Inc. 

“The information covered in this book is the same material the pros know, but taught in an 
educational and humorous manner that doesn’t ever make you think the material is impossible 
to learn or you are out of your element.” 

— Christopher Schmitt, author of The CSS Cookbook 
and Professional CSS, schmitt@christopher. org 


“Oh, great. You made an HTML book simple enough a GEO can understand it. What will you 
do next? Accounting simple enough my developer can understand it? Next thing you know, we’ll 
be collaborating as a team or something.” 

一 Janice Fraser, CEO, Adaptive Path 






More Praise for Head First HTML and CSS 


“I *heart* Head First HTML and CSS — it teaches you everything you need to learn in a Tun 
coated’ format!” 

— Sally Applin，UI designer and fine artist, http: / / sally, com 


“This book has humor and charm, but most importantly, it has heart. I know that sounds 
ridiculous to say about a technical book, but I really sense that at its core, this book (or at least 
its authors) really care that the reader learns the material. This comes across in the style, the 
language, and the techniques. Learning — real understanding and comprehension — on the part 
of the reader is clearly topmost in the minds of the authors. And thank you, thank you, thank 
you, for the book’s strong and sensible advocacy of standards compliance. It’s great to see an 
entry-level book, that I think will be widely read and studied, campaign so eloquently and 
persuasively on behalf of the value of standards compliance in web page code. I even found 
in here a few great arguments I had not thought of — ones I can remember and use when I am 
asked (as I still am) — ‘what’s the deal with compliance and why should we care? 5 I’ll have more 
ammo now! I also liked that the book sprinkles in some basics about the mechanics of actually 
getting a web page live — FTP, web server basics, file structures, etc.” 

— Robert Neer，Director of Product Development ， Movies.com 


“Head First HTML and CSS is a most entertaining book for learning how to build a great web 
page. It not only covers everything you need to know about HTML and CSS, it also excels in 
explaining everything in layman’s terms with a lot of great examples. I found the book truly 
enjoyable to read, and I learned something new!” 

— Newton Lee ， Editor-in-Chief, ACM Computers in Entertainment 
http:/ / zvzvzv. acmcie. org 


“My wife stole the book. She’s never done any web design, so she needed a book like Head First 
HTML and CSS to take her from beginning to end. She now has a list of websites she wants to 
build — for our son’s class, our family.. .If I’m lucky, I’ll get the book back when she’s done.” 

— David Kaminsky, Master Inventor，IBM 


“Beware. If you’re someone who reads at night before falling asleep, you’ll have to restrict Head 
First HTML and CSS to daytime reading. This book wakes up your brain.” 

— Pauline McNamara, Center for New Technologies and Education, 
Fribourg University, Switzerland 











Praise for other books by Eric Freeman and Elisabeth Robson 


“From the awesome Head First Java folks, this book uses every conceivable trick to help you 
understand and remember. Not just loads of pictures: pictures of humans, which tend to interest 
other humans. Surprises everywhere. Stories, because humans love narrative. (Stories about things 
like pizza and chocolate. Need we say more?) Plus, it’s darned funny •，’ 

Bill Camarda，READ ONLY 

“This book’s admirable clarity, humor, and substantial doses of clever make it the sort of book that 
helps even nonprogrammers think well about problem solving.” 

— Cory Doctorow, co-editor of Boing Boing 

and author of Down and Out in the Magic Kingdom 
and Someone Comes to Town, Someone Leaves Town 


“I feel like a thousand pounds of books have just been lifted off of my head.” 

— Ward Cunningham，inventor of the wiki 
and founder of the Hillside Group 


“This book is close to perfect, because of the way it combines expertise and readability. It speaks with 
authority and it reads beautifully. It’s one of the very few software books I’ve ever read that strikes 
me as indispensable. (I’d put maybe 10 books in this category，at the outside.)’’ 

— David Gelernter，professor of computer science, 

Yale University, and author of Mirror Worlds and Machine Beauty 


“A nosedive into the realm of patterns, a land where complex things become simple, but where 
simple things can also become complex. I can think of no better tour guides than these authors.” 

— Miko Matsumura, industry analyst, The Middleware Company 
former Chief Java Evangelist, Sun Microsystems 


U I laughed, I cried, it moved me.” 

— Daniel Steinberg, Editor-in-Chief, java.net 


“Just the right tone for the geeked-out, casual-cool guru coder in all of us. The right reference for 
practical development strategies — gets my brain going without having to slog through a bunch of 
tired, stale professor-speak.” 


Travis Kalanick, founder of Scour and Red Swoosh, 
member of the MIT TR100 


“I literally love this book. In fact, I kissed this book in front of my wife.” 


Satish Kumar 
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I The Language of the Web 

The only thing that is standing between you and getting 
yourself on the Web is learning to speak the lingo ： 

HyperText Markup Language, or HTML for short. So, get ready for some language 
lessons. After this chapter, not only are you going to understand some basic 
elements of HTML, but you’ll also be able to speak HTML with a little style. Heck, 
by the end of this book, you’ll be talking HTML like you grew up in Webville. 



No pressure, but 
thousands of people are going 
to visit this web page when you're 
finished. It not only needs to be 
correct, it's gotta look great, 
too! 


The web killed the radio star 
What does the web server do? 

What you write (the HTML) 

What the browser creates 
Your big break at Starbuzz Coffee 
Creating the Starbuzz web page 
Creating an HTML file (Mac) 
Creating an HTML file (Windows) 
Meanwhile, back at Starbuzz Coffee... 
Saving your work 

Opening your web page in a browser 
Take your page for a test drive 
Are we there yet? 
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Tags dissected 
Meet the style element 
Giving Starbuzz some style... 

Gruisin 5 with style … 
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Meeting the “HT，，in HTML 

Did someone say “hypertext?” What’s that? oh, only the entire 

basis of the Web. In Chapter 1 we kicked the tires of HTML and found it to be a nice 
markup language (the “ML” in HTML) for describing the structure of web pages. Now 
we’re going to check out the “HT” in HTML, hypertext, which will let us break free of 


a single page and link to other pages. Along the way we’re going to meet a powerful 


new element, the <a> element, and learn how being “relative” is a groovy thing. So, 


fasten your seat belts — you’re about to learn some hypertext. 
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b Page Construction 


I wa 

YouV( 


as told I’d actually be creating web pages in this book? 

You’ve certainly learned a lot already: tags, elements, links, paths...but it’s all for 
nothing if you don’t create some killer web pages with that knowledge. In this chapter 
we’re going to ramp up construction: you’re going to take a web page from conception 
to blueprint, pour the foundation, build it, and even put on some finishing touches. All 


you need is your hard hat and your toolbelt, as we’ll be adding some new tools and 
giving you some insider knowledge that would make Tim “The Toolma 门 ” Taylor proud. 
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getting connected 



Trip to Webville 


b pages are a dish best served on the Internet, sofar 

you’ve only created HTML pages that live on your own computer. You’ve also 
only linked to pages that are on your own computer. We’re about to change all 
that. In this chapter well encourage you to get those web pages on the Internet 
where all your friends, fans, and customers can actually see them. We'll also 


reveal the mysteries of linking to other pages by cracking the code of the h, t, t, p, 
:, /, /, w, w, w. So, gather your belongings; our next stop is Webville. 
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Linking to Caffeine Buzz 143 
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Web page fit and finish 147 
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5 Meeting the Media 

Smile and say “cheese.” Actually, smile and say “gif,” 

“jpg,” or “png’ ’ 一 these are going to be your choices when “developing 
pictures” for the Web. In this chapter you’re going to learn all about adding your 
first media type to your pages: images. Got some digital photos you need to get 
online? No problem. Got a logo you need to get on your page? Got it covered. 

But before we get into all that, don’t you still need to be formally introduced to 
the <img> element? So sorry, we weren’t being rude; we just never saw the “right 
opening.” To make up for it, here’s an entire chapter devoted to <img>. By the end 
of the chapter you’re going to know all the ins and outs of how to use the <img> 
element and its attributes. You’re also going to see exactly how this little element 
causes the browser to do extra work to retrieve and display your images. 



This iimd^e is *y\3die up 
of -thousands 0-( - pixels 
when _rt’s displayed or\ 
a tonwpu-tcv stvccn. 


tteve’s a 1 。七 
c4 - fiK.cls 

■fco^ct^cv w»akc uf 
■the uffcv fav-t o+ 
■t^C v 吵七 o-f 

七 he bullcv% 


tteve^ Ohc pixel. 


How the browser works with images 164 

How images work 167 

<img>: it’s not just relative links anymore 171 

Always provide an alternative 173 

Sizing up your images 174 

Creating the ultimate fan site: myPod 175 

Whoa! The image is way too large 178 

Open the image 182 

Resizing the image 183 

Fixing up the myPod HTML 188 

More photos for myPod 190 

Turning the thumbnails into links 196 

Create individual pages for the photos 197 

So, how do I make links out of images? 198 

What format should we use? 203 

To be transparent, or not to be transparent? That is the question... 204 
Wait, what is the color of the web page background? 206 

Check out the logo with a matte 207 

Add the logo to the myPod web page 208 

Exercise Solutions 213 


XIV 

















table of contents 




Serious HTML 

What else is there to know about HTML? You re well on your way to 
mastering HTML. In fact, isn’t it about time we move on to CSS and learn how to make 
all this bland markup look fabulous? Before we do, we need to make sure your HTML 
is really ready for the big leagues. Don’t get us wrong, you’ve been writing first-class 
HTML all along, but there are just a few extra things you need to do to make it “industry 
standard” HTML It’s also time you think about making sure you’re using the latest and 
greatest HTML standard, otherwise known as HTML5. By doing so, you’ll ensure that 
your pages play well with the latest i-Device, and that they’ll display more uniformly 
across all browsers (at least the ones you’d care about). You’ll also have pages that 
load faster, pages that are guaranteed to play well with CSS, and pages that are ready 
to move into the future as the standards grow. Get ready, this is the chapter where you 
move from web tinkerer to web professional. 
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A Brief History of HTML 

The new, and improved, HTML5 doctype 

HTML, the new “living standard” 

Adding the document type definition 
The doctype test drive 
Meet the W3C validator 
Validating the Head First Lounge 
Houston, we have a problem... 

Fixing that error 
We’re almost there... 

Adding a <meta> tag to specify the character encoding 

Making the validator (and more than a few browsers) happy 
with a <meta> tag... 

Third time’s the charm? 


Calling all HTML professionals, grab the handbook … 
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Adding a Little Style 

I was told there’d be CSS in this book. So far youve been 

concentrating on learning HTML to create the structure of your web pages. But as 
you can see, the browser’s idea of style leaves a lot to be desired. Sure, we could 
call the fashion police, but we don’t need to. With CSS, you’re going to completely 
control the presentation of your pages, often without even changing your HTML. 
Could it really be so easy? Well, you are going to have to learn a new language; 
after all, Webville is a bilingual town. After reading this chapter’s guide to learning 
the language of CSS, you’re going to be able to stand on either side of Main Street 
and hold a conversation. 
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You’re not in Kansas anymore 
Overheard on Webville’s “Trading Spaces” 

Using CSS with HTML 

Getting CSS into your HTML 

Adding style to the lounge 

Let’s put a line under the welcome message too 

So, how do selectors really work? 

Seeing selectors visually 

Getting the Lounge style into the elixirs and directions pages 
It’s time to talk about your inheritance … 

Overriding inheritance 

Adding an element to the greentea class 

Creating a class selector 

Taking classes further... 

The world’s smallest and fastest guide to how styles are applied 
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styling With fonts and colors 



Expanding Your Vocabulary 

Your CSS language lessons are coming along nicely. You 

already have the basics of CSS down, and you know how to create CSS rules to 
select and specify the style of an element. Now it’s time to build your vocabulary, 
and that means picking up some new properties and learning what they can do 
for you. In this chapter we’re going to work through some of the most common 
properties that affect the display of text. To do that, you’ll need to learn a few 
things about fonts and color. You’re going to see you don’t have to be stuck with 
the fonts everyone else uses, or the clunky sizes and styles the browser uses as 
the defaults for paragraphs and headings. You’re also going to see there is a lot 
more to color than meets the eye. 



Text and fonts from 30,000 feet 
What is a font family anyway? 

Specifying font families using CSS 
Dusting off Tony’s journal 

How do I deal with everyone having different fonts? 

How Web Fonts work 

How to add a Web Font to your page … 

Adjusting font sizes 

So, how should I specify my font sizes? 

Let’s make these changes to the font sizes in Tony’s web page 

Changing a font’s weight 
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Styling Tony’s quotes with a little italic 

How do web colors work? 

How do I specify web colors? Let me count the ways... 

The two-minute guide to hex codes 
How to find web colors 
Back to Tony’s page … 

Everything you ever wanted to know about text-decorations 
Removing the underline... 
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Getting Intimate with Elements 

To do advanced web construction, you really need to know 

your building materials. In this chapter we’re going to take a close look 
at our building materials: the HTML elements. We’re going to put block and inline 
elements right under the microscope and see what they’re made of. You’ll see how 
you can control just about every aspect of how an element is constructed with CSS. 
But we don’t stop there — you’ll also see how you can give elements unique identities. 
And, if that weren’t enough, you’re going to learn when and why you might want to 
use multiple stylesheets. So, turn the page and start getting intimate with elements. 
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Advanced Web Construction 

It’s time to get ready for heavy construction, in this chapter 

we’re going to roll out two new HTML elements: <div> and <span>. These are no 
simple “two by fours ”； these are full-blown steel beams. With <div> and <span>, 


you’re going to build some serious supporting structures, and once you’ve got those 
structures in place, you’re going to be able to style them all in new and powerful 
ways. Now, we couldn’t help but notice that your CSS toolbelt is really starting to 
fill up, so it’s time to show you a few shortcuts that will make specifying all these 
properties a lot easier. And we’ve also got some special guests in this chapter, 


the pseudo-classes, which are going to allow you to create some very interesting 
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selectors. (If you’re thinking that “pseudo-classes” would make a great name for your 
next band, too late; we beat you to it.) 


Black Brain Brew 
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me mory? Try our Black 
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Your brain will thank you 
for the boost. 


A close look at the elixirs HTML 

Let’s explore how we can divide a page into logical sections 
Adding a border 

Adding some real style to the elixirs section 

Working on the elixir width 

Adding the basic styles to the elixirs 

What we need is a way to select descendants 

Changing the color of the elixir headings 
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layout and positioning 

Arranging Elements 

It’s time to teach your HTML elements new tricks, we re not 

going to let those HTML elements just sit there anymore —— it’s about time they get 
up and help us create some pages with real layouts. How? Well, you’ve got a good 
feel for the <div> and <span> structural elements and you know all about how the 
box model works, right? So, now it’s time to use all that knowledge to craft some real 
designs. No, we’re not just talking about more background and font colors — we’re 
talking about full-blown professional designs using multicolumn layouts. This is the 
chapter where everything you’ve learned comes together. 
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Modern HTML 

So, we’re sure you’ve heard the hype around HTML5. And, 

given how far along you are in this book, you’re probably wondering if you made the 
right purchase. Now, one thing to be clear about, up front, is that everything you’ve 
learned in this book has been HTML, and more specifically has met the HTML5 
standard. But there are some new aspects of HTML markup that were added with 
the HTML5 standard that we haven’t covered yet, and that’s what we’re going to do 
in this chapter. Most of these additions are evolutionary, and you’re going to find you 
are quite comfortable with them given all the hard work you’ve already done in this 
book. There’s some revolutionary stuff too (like video), and well talk about that in this 
chapter as well. So, let’s dive in and take a look at these new additions! 
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Rethinking HTML structure 
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Getting Tabular 

If it walks like a table and talks like a table... There comes a time 

I I in life when we have to deal with the dreaded tabular data. Whether you need to 

create a page representing your company’s inventory over the last year or a catalog 
of your vinylmation collection (don’t worry, we won’t tell), you know you need to do 
it in HTML, but how? Well, have we got a deal for you: order now, and in a single 
chapter we’ll reveal the secrets that will allow you to put your very own data right 
inside HTML tables. But there’s more: with every order we’ll throw in our exclusive 
guide to styling HTML tables. And, if you act now, as a special bonus, we’ll throw in 
our guide to styling HTML lists. Don’t hesitate; call now! 
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So far all your web communication has been one-way: 
from your page to your visitors. Golly，wouldrVt it be nice if your visitors 
could talk back? That’s where HTML forms come in: once you enable your pages 
with forms (along with a little help from a web server), your pages are going to be 
able to gather customer feedback, take an online order, get the next move in an 
online game, or collect the votes in a “hot or not” contest. In this chapter you’re going 
to meet a whole team of HTML elements that work together to create web forms. 
You’ll also learn a bit about what goes on behind the scenes in the server to support 
forms, and we’ll even talk about keeping those forms stylish. 



How forms work 

What you write in HTML 

What the browser creates 

How the <f orm> element works 

Getting ready to build the Bean Machine form 

Adding the <f orm> element 

How form element names work 

Back to getting those <input〉elements into your HTML 

Adding some more input elements to your form 

Adding the <select> element 

Give the customer a choice of whole or ground beans 

Punching the radio buttons 

Using more input types 

Adding the number and date input types 

Completing the form 

Adding the checkboxes and text area 

Watching GET in action 

Getting the form elements into HTML structure 

Styling the form with CSS 

A word about accessibility 

What more could possibly go into a form? 

Exercise Solutions 


646 

648 

649 

650 
660 
661 
662 

664 

665 

666 
668 

669 

670 

671 

672 

673 
679 
684 
686 
688 
689 
693 


xxiii 


















table of contents 


appendix ： leftovers 

1 The Top Ten Topics (We Didn’t Cover) 

We covered a lot of ground, and 
you’re almost finished with this 

book. We’ll miss you, but before we let you 
go, we wouldn’t feel right about sending you out 
into the world without a little more preparation. 

We can’t possibly fit everything you’ll need to 
know into this relatively short chapter. Actually, 
we did originally include everything you need to 
know about HTML and CSS (not already covered 
by the other chapters), by reducing the type point 
size to .00004. It all fit, but nobody could read it. 

So, we threw most of it away, and kept the best 
bits for this Top Ten appendix. 
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how to use this book 


Who is this book for? 


If you can answer “yes” to all of these: 

① Do you have access to a computer with a web browser 
and a text editor? 

(2) Do you want to learn, understand, and remember how 
to create web pages using the best techniques and the 
most recent standards? 



印 you Kav C aucss -to a^y 
•… the las 七 dtcadt, the 

Shswcv- is yes. 


(3) Do you prefer stimulating dinner-party conversation 
to dry, dull, academic lectures? 


this book is for you. 


Who should probably back away from this book? 

If you can answer “yes” to any one of these: 

(?) Are you completely new to computers? 

(You don’t need to be advanced, but you should 
understand folders and files, simple text editing 
applications, and how to use a web browser.) 

(§) Are you a kick-butt web developer looking for a 
reference book? 

( 3 ) Are you afraid to try something different? Would 
you rather have a root canal than mix stripes with 
plaid? Do you believe that a technical book can’t be 
serious if HTML tags are anthropomorphized? 


this book is not for you. 


-this book is 

+ 饮 ahyohe wi-th a 〜 edit 心 d.J 
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the intro 


Wc know what you're thinking. 

“How can this be a serious book?” 


“What’s with all the graphics?” 




Your brain craves novelty. It’s always searching, scanning, waiting for 
something unusual. It was built that way, and it helps you stay alive. 


Today, you’re less likely to be a tiger snack. But your brain’s still looking. 
You just never know. 


So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real]oh — recording things that matter. It doesn’t bother saving the 
boring things; they never make it past the “this is obviously not important” 
filter. 


Just one problem. Your brain’s trying to do you a big favor. It’s 
trying to make sure that this obviously non-important content doesn’t 
clutter up scarce resources. Resources that are better spent storing 
the really big things. Like tigers. Like the danger of fire. Like how 
you should never again snowboard in shorts. 


And there’s no simple way to tell your brain, “Hey brain, thank 
you very much, but no matter how dull this book is, and how little 
I’m registering on the emotional Richter scale right now, I really do 
want you to keep this stuff around.” 


“Can I actually learn it this way?” 

And we know what your brain is thinking. 




How does your brain know what’s important? Suppose you’re out for a day 
hike and a tiger jumps in front of you — what happens inside your head 
and body? 

Neurons fire. Emotions crank up. Chemicals surge. 

And that’s how your brain knows … 

This must be important! Don’t forget it! 

But imagine you’re at home, or in a library. It’s a safe, warm, tiger- 
free zone. You’re studying. Getting ready for an exam. Or trying to 
learn some tough technical topic your boss thinks will take a week, 

10 days at the most. 


Great. Only 
637 more dull, dry, 
boring pages. 
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the intro 


MetacogHitioH ： thinking about thinking 

If you really want to learn, and you want to learn more quickly and more deeply, 
pay attention to how you pay attention. Think about how you think. Learn how you 
learn. 

Most of us did not take courses on metacognition or learning theory when we were 
growing up. We were expected to learn, but rarely taught how to learn. 

But we assume that if you’re holding this book, you really want to learn 
how to create web pages. And you probably don’t want to spend a lot of 
time. And you want to remember what you read, and be able to apply it. 

And for that, you’ve got to understand it. To get the most from this book, 
or any book or learning experience, take responsibility for your brain. 

Your brain on this content. 

The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 

Otherwise, you’re in for a constant battle, with your brain doing its best 
to keep the new content from sticking. 

So how DO you get your brain to think HTML & CSS 
are as important as a tiger? 

There’s the slow, tedious way, or the faster, more effective way. The 
slow way is about sheer repetition. You obviously know that you are 

able to learn and remember even the dullest of topics, if you keep pounding on the same 
thing. With enough repetition, your brain says, “This doesn’t feel important to him, but he 
keeps looking at the same thing over and over and over, so I suppose it must be.” 



The faster way is to do anything that increases brain activity^ especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try 
to make sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 

But pictures and conversational style are just the beginning. 
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Here's what WE did: 


We used pictures^ because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth 1,024 words. And when text and pictures work together, we 
embedded the text in the pictures because your brain works more effectively when the text is 
within the thing the text refers to, as opposed to in a caption or buried in the text somewhere. 

We used redundancy, saying the same thing in different ways and with different media types, 
and multiple senses, to increase the chance that the content gets coded into more than one area of 
your brain. 



We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content, because your brain is 
tuned to pay attention to the biochemistry of emotions. That which causes you to feel something 
is more likely to be remembered, even if that feeling is nothing more than a little humor, 
surprise, or interest. 

We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening to a 
presentation. Your brain does this even when you’re reading. 



Be Ae Browser 


We included more than 100 activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-doable, because that’s what most people prefer. 

We used multiple learning styles, because joz/ might prefer step-by-step procedures, while 
someone else wants to understand the big picture first, while someone else just wants to see a 
code example. But regardless of your own learning preference, everyone benefits from seeing the 
same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. 
Since working one side of the brain often means giving the other side a chance to rest, you can 
be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view, because 
your brain is tuned to learn more deeply when it’s forced to make evaluations and judgments. 


BULLET POINT 



Puzzles 



We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work at 
something. Think about it — you can’t get your body in shape just by watching people at the gym. 
But we did our best to make sure that when you’re working hard, it’s on the right things. That 
you^re not spending one extra dendrite processing a hard-to-understand example, or 
parsing difficult, jargon-laden, or overly terse text. 

We used people. In stories, examples, pictures, etc., because, well, because a person. And 
your brain pays more attention to people than it does to things. 

We used an 80/20 approach. We assume that if you’re going to be a kick-butt web developer, 
this won’t be your only book. So we don’t talk about everything. Just the stuff you’ll actually need. 
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Here's what YOU caw do to bend 
your brain into submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
t for you and what doesn’t. Try new things. 

-— 桃士 

° h y°^ 


(T) Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really is asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 

(g) Do the exercises. Write your own notes. 

We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 

^3) Read the “There Are No Dumb Questions.” 

That means all of them. They’re not optional 
sidebars — they } re part of the core content! 

Don’t skip them. 

(4) Make this the last thing you read before 
bed. Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after you put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing time, some of what you 
just learned will be lost. 

(5^ Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 


( 6 ) Talk about it. Out loud. 

Speaking activates a different part of the brain. 

If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You’ll learn more quickly, and 
you might uncover ideas you hadn’t known were 
there when you were reading about it. 

(7^ Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim the 
surface or forget what you just read, it’s time for a 
break. Once you go past a certain point, you won’t 
learn faster by trying to shove more in, and you 
might even hurt the process. 

(§) Fee# something! 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke is 
still better than feeling nothing at all. 

(9) Create something! 

Apply this to something new you’re designing, or 
rework an older project. Just do something to get some 
experience beyond the exercises and activities in 
this book. All you need is a pencil and a problem 
to solve...a problem that might benefit from using 
HTML and CSS. 


you are here ► 


XXXI 









how to use this book 


Read me 

This is a learning experience, not a reference book. We deliberately stripped out 
everything that might get in the way of learning whatever it is we’re working on at that 
point in the book. And the first time through, you need to begin at the beginning, because 
the book makes assumptions about what you’ve already seen and learned. 

We begin by teaching basic HTML, then standards-based HTML5. 

To write standards-based HTML, there are a lot of technical details you need to 
understand that aren’t helpful when you’re trying to learn the basics of HTML. Our 
approach is to have you learn the basic concepts of HTML first (without worrying about 
these details), and then, when you have a solid understanding of HTML, teach you to 
write standards-compliant HTML (the most recent version of which is HTML5). This 
has the added benefit that the technical details are more meaningful after you’ve already 
learned the basics. 

It’s also important that you be writing compliant HTML when you start using CSS, so we 
make a point of getting you to standards-based HTML before you begin any serious work 
with CSS. 


We don’t cover every single HTML element or attribute or CSS 
property ever created. 

There are a lot of HTML elements, a lot of attributes, and a lot of CSS properties. Sure, 
they’re all interesting, but our goal was to write a book that weighs less than the person 
reading it, so we don’t cover them all here. Our focus is on the core HTML elements and 
CSS properties that matter to you, the beginner, and making sure that you really, truly, 
deeply understand how and when to use them. In any case, once you’re done with Head 
First HTML and CSS, you’ll be able to pick up any reference book and get up to speed 
quickly on all the elements and properties we left out. 


This book advocates a clean separation between the structure of 
your pages and the presentation of your pages. 

Today, serious web pages use HTML to structure their content, and CSS for style and 
presentation. Nineties-era pages often used a different model, one where HTML was used 
for both structure and style. This book teaches you to use HTML for structure and CSS 
for style; we see no reason to teach you outdated bad habits. 


We encourage you to use more than one browser with this book. 

While we teach you to write HTML and CSS that are based on standards, you’ll still (and 
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probably always) encounter minor differences in the way web browsers display pages. So, 
we encourage you to pick at least two modern browsers and test your pages using them. 
This will give you experience in seeing the differences among browsers and in creating 
pages that work well in a variety of them. 


We often use tag names for element names. 

Rather than saying “the a element,” or “the ‘a’ element，” we use a tag name, like “the <a> 
element.” While this may not be technically correct (because <a> is an opening tag, not a 
full-blown element), it does make the text more readable, and we usually follow the name 
with the word “element” to avoid confusion. 


The activities are NOT optional. 

The exercises and activities are not add-ons; they’re part of the core content of the book. 
Some of them are to help with memory, some are for understanding, and some will help 
you apply what you’ve learned. Don } t skip the exercises. The crossword puzzles are the 
only things you don’t have to do, but they’re good for giving your brain a chance to think 
about the words in a different context. 


The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we want 
you to finish the book remembering what you’ve learned. Most reference books don’t have 
retention and recall as a goal, but this book is about learning, so you’ll see some of the same 
concepts come up more than once. 

The examples are as lean as possible. 

Our readers tell us that it’s frustrating to wade through 200 lines of an example looking for 
the two lines they need to understand. Most examples in this book are shown within the 
smallest possible context, so that the part you’re trying to learn is clear and simple. Don’t 
expect all of the examples to be robust, or even complete —— they are written specifically for 
learning, and aren’t always fully functional. 

We’ve placed all the example files on the Web so you can download them. You’ll find them 

at http : //wickedlysmart.com/hfhtmlcss/. 


The Brain Power exercises don’t have answers. 

For some of them, there is no right answer, and for others, part of the learning experience 
of the Brain Power activities is for you to decide if and when your answers are right. In 
some of the Brain Power exercises, you will find hints to point you in the right direction. 
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Our reviewers: 

We’re extremely grateful for our technical review team. Johannes de Jong 
organized and led the whole effort, acted as “series dad,” and made it all work 
smoothly. Pauline McNamara, “co-manager” of the effort, held things together 
and was the first to point out when our examples were a little more “baby boomer’’ 
than hip. The whole team proved how much we needed their technical expertise 
and attention to detail. Valentin Crettaz, Barney Marispini, Marcus 
Green, Ike Van Atta, David O’Meara，Joe Konior, and Corey McGlone 
left no stone unturned in their review and the book is much better for it. You guys 
rock! And further thanks to Corey and Pauline for never letting us slide on our 
often too formal (or we should just say it, incorrect) punctuation. A shout-out to 
JavaRanch as well for hosting the whole thing. 

A big thanks to Louise Barr, our token web designer, who kept us honest on our 
designs and on our use of HTML and CSS (although you’ll have to blame us for 
the actual designs). 


David O'/l/Icav-a 


/vlavdus 
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Even more technical review: 

We’re also extremely grateful to our esteemed technical reviewer David Powers. 
We have a real love/hate relationship with David because he made us work 
so hard, but the result was oh so worth it. The truth be told, based on David’s 
comments, we made significant changes to this book and it is technically twice the 
book it was before. Thank you, David. 

At O’Reilly: 

Our biggest thanks to our editor, Brett McLaughlin, who cleared the path for 
this book, removed every obstacle to its completion, and sacrificed family time to 
get it done. Brett also did hard editing time on this book (not an easy task for a 
Head First title). Thanks, Brett; this book wouldn’t have happened without you. 
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Our sincerest thanks to the whole O’Reilly team: 

Greg Corrin ? Glenn Bisignani, Tony Artuso, 
and Kyle Hart all led the way on marketing 
and we appreciate their out-of-the-box approach. 

Thanks to Ellie Volkhausen for her inspired cover design that continues to serve 
us well, and to Karen Montgomery for stepping in and bringing life to this book’s 
cover. Thank you, as always, to Colleen Gorman for her hardcore copyedit (and for 
keeping it all fun). And we couldn’t have pulled off a color book like this without Sue 
Willing and Claire Cloutier. 


No Head First acknowledgment would be complete without thanking Mike 


Kathy Sierra and Bert Bates: 


Last, and anything but least, to Kathy 
Sierra and Bert Bates, our partners 
in crime and the BRAINS who created the 
series. Thanks, guys, for trusting us even more 
with your baby. We hope once again we’ve 
done it justice. The three-day jam session was 
the highlight of writing the book, we hope to 
repeat it soon. Oh, and next time around, can 
you give LTJ a call and tell him he’s just going 
to have to make a trip back to Seattle? 



Loukides for shaping the Head First concept into a series, and to Tim 0 ， Reill y for always being there and his 
continued support. Finally, thanks to Mike 

Hendrickson for bringing us into the Head ，备 1 

First family and having the faith to let us run 
with it. 
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*The large number of acknowledgments is because we’re testing the theory 
that everyone mentioned in a book acknowledgment will buy at least one copy, 
probably more, what with relatives and everything. If you’d like to be in the 
acknowledgment of our next book, and you have a large family, write to us. 
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Tech reviewers (second edition) 

We couldn’t sleep at night without knowing that our high- 
powered HTML & CSS reviewer, David Powers, has scoured 
this book for inaccuracies. Truth is, so many years had passed 
since the first edition that we had to hire a private detective 
to locate him (it’s a long story, but he was finally located in his 
underground HTML & CSS lair and research lab). Anyway, more 
seriously, while all the technical faults in this book sit solely with 
the authors (that’s us), we can assure you in every case David 
tried to make sure we did things right. Once again, David was 
instrumental in the writing of this book. 


We’re extremely grateful for everyone on our technical review 
team. Joe Konior joined us once again for this edition, along 
with Dawn Griffiths (co-author of Head First C), and Shelley 
Powers (an HTML & CSS “power’’house who has been writing 
about the Web for years). Once again, you all rock! Your feedback 
was amazingly thorough, detailed, and helpful. Thank you. 
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Our biggest thanks to our chief editor, Mike Hendrickson, who 
made this book happen in every way (other than actually writing it), 
was there for us the entire journey, and more importantly (the biggest 
thing any editor can do) totally trusted us to get it done! Thanks, Mike; 
none of our books would have happened without you. You’ve been our 
champion for well over a decade and we love you for it! 

Of course it takes a village to publish a book, and behind the scenes a 
talented and friendly group at O’Reilly made it all happen. Our sincerest 
thanks to the whole O’Reilly team: Kristen Borg (production editor 
extraordinaire); the brilliant Rachel Monaghan (proofreader); Ron 
Strauss for his meticulous index; Rebecca Demarest for illustration 
help; Karen Montgomery, ace cover designer; and last but definitely 
not least, Louise Barr, who always helps our pages look better. 
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Safari 


Books Online 


Safari® Books Online is an on-demand digital library that lets 
@ you easily search over 7,500 technology and creative reference 
books and videos to find the answers you need quickly. 


With a subscription, you can read any page and watch any video from our library 
online. Read books on your cell phone and mobile devices. Access new titles before 
they are available for print, and get exclusive access to manuscripts in development 
and post feedback for the authors. Copy and paste code samples, organize your 
favorites, download chapters, bookmark key sections, create notes, print out pages, 
and benefit from tons of other time-saving features. 


O’Reilly Media has uploaded this book to the Safari Books Online service. To have 
full digital access to this book and others on similar topics from O’Reilly and other 
publishers, sign up for free at http:/ / my.safaribooksonline.com. 



getting t9 know HTML 

The Language of the Web. 



/ Not so fast...to get to 
know me, you've got to 
speak the universal language 
You know, HTML and CSS. 




The only thing that is standing between you and getting 
yourself on the Web is learning to speak the lingo ： 

HyperText Markup Language, or HTML for short. So, get ready for some language 
lessons. After this chapter, not only are you going to understand some basic 
elements of HTML, but you’ll also be able to speak HTML with a little style. Heck, 
by the end of this book you’ll be talking HTML like you grew up in Webville. 


this is a new chapter 






html powers the web 

the Web 

killed the radio star 

Want to get an idea out there? Sell something? Just need a creative 
outlet? Turn to the Web — we don’t need to tell you it has become 
the universal form of communication. Even better, it’s a form of 
communication YOU can participate in. 


But if you really want to use the Web effectively, you’ve got to 
know a few things about HTML — not to mention, a few things 
about how the Web works too. Let’s take a look from 30,000 feet: 



/\nd *thcv-c avc a lo*t of PCs ar>d Atgets 
toY\Y\tdtd *to i\\t \r\itrY\ti all vurm ， v/eb 
bvowscvs. Mov-c *impoy*tar>*tly, 七 a\re 
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The HTML m youv- y/cb f>d^e -tells *thc 
b\roy/scv- wha*t i*t -fco ki^ow *bo display 
youv pajc- i-f you^vc doY\t youv- job 
y/cll, youv- pages will display well oy\ tc\\ 
phones mobile devices, d^d wovk v/i*th 
speech bv-ov/sev-s maj^i-fiev-s -fov 

*thc visually impaired. 


To make v/cb 7? trtait 

融 u? La^uay (ttTMU U 
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veiv-ieve youv- y/cb ovcv- 


2 Chapter 1 





















































the language of the web 


What does the web server do? 


Web servers have a full-time job on the Internet, tirelessly waiting for requests from web 
browsers. What kinds of requests? Requests for web pages, images, sounds, or maybe 
even a video. When a server gets a request for any of these resources, the server finds the 
resource, and then sends it back to the browser. 



Tk severs just a 
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sc\rvcv- 

s*tov-cs HTML 
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sounds o*b^cv 
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Web Server 
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''Found it, here ya go" 
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What does the web browser do? 

You already know how a browser works: you’re surfing around the Web and you click on a 
link to visit a page. That click causes your browser to request an HTML page from a web 
server, retrieve it, and display the page in your browser window. 


)) 


A 
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The b\rowscv* 




… 扣 d -the bv-ov/sev- displays 

the ttT/l/lL page- 





But how does the browser know how to display a page? That’s where HTML comes in. HTML 
tells the browser all about the content and structure of the page. Let’s see how that works. •. 
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writing some html 


What you write (the HTML) 

So, you know HTML is the key to getting a browser to display your pages, but 
what exactly does HTML look like? And what does it do? 

Let’s have a look at a little HTML.. .imagine you’re going to create a web 
page to advertise the Head First Lounge, a local hangout with some good tunes, 
refreshing elixirs, and wireless access. Here’s what you’d write in HTML: 


<html> 


<head> 

<title>Head 

</head> 

<body> 

<hl>Welcome 


First Lounge</ title> 



to the Head First Lounge</hl> 


<img src="drinks.gif"> ⑥ 
<P> 




Join us any evening for refreshing elixirs, 
conversation and maybe a game or 
two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; 

BYOWS (Bring your own web server). 

</p> 

<h2>Directions</h2> 


<P> 



You'll find us right in the center of 
downtown Webville. Come join us! 


</p> 

</body> 

</html> 



We don’t expect you to know HTML yet. 

At this point you should just be getting a feel 
for what HTML looks like; we’re going to cover 
everything in detail in a bit. For now, study the HTML and see 
how it gets represented in the browser on the next page. Be sure 
to pay careful attention to each letter annotation and how and 
where it is displayed in the browser. 
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the language of the web 


What the browser creates 

When the browser reads your HTML, it interprets all the tags that 
surround your text. Tags are just words or characters in angle brackets, 
like <head>, <p>, <hl>, and so on. The tags tell the browser about the 
structure and meaning of your text. So rather than just giving the browser 
a bunch of text, with HTML you can use tags to tell the browser what 
text is in a heading, what text is a paragraph, what text needs to be 
emphasized, or even where images need to be placed. 


Let’s check out how the browser interprets the tags in the 
Head First Lounge: 


Uohtt V^ovi cadV. 
i\st HTML -to 
^ bv-ov^sev d'» s ?' a 7 s， 


0 Head Ftrst Lounge 

<A)_ 




+ 

http://lounge.wickedlysmart.com/ 



Q- 


Welcome to the Head First Lounge 


© 




us any evening for refreshing elixirs, conversation and maybe a game or two of Dance\Dance Revolution. 
F ireless access is always provided; BYOWS (Bring your own web server). 


Directions 


(^ Y 


ou'll find us right in the center of downtown Webville. Come join us! 
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more about markup and tags 


tJiereiare no ^ 

Dumb Questi9ns 


So HTML is just a bunch of tags 
that I put around my text? 

For starters. Remember that HTML 
stands for HyperText Markup Language, so 
HTML gives you a way to “mark up” your text 
with tags that tell the browser how your text 
is structured. But there is also the HyperText 
aspect of HTML, which well talk about a little 
later in the book. 

How does the browser decide how 
to display the HTML? 

HTML tells your browser about the 
structure of your document: where the 
headings are, where the paragraphs are, 
what text needs emphasis, and so on. Given 
this information, browsers have built-in 
default rules for how to display each of these 
elements. 

But you don’t have to settle for the default 
settings. You can add your own style and 
formatting rules with CSS that determine 
font, colors, size, and a lot of other 
characteristics of your page. We’ll get back 
to CSS later in the chapter. 

The HTML for the Head First 
Lounge has all kinds of indentation and 
spacing, and yet I don’t see that when it 
is displayed in the browser. How come? 

Correct, and good catch. Browsers 
ignore tabs, returns, and most spaces in 
HTML documents. Instead, they rely on 
your markup to determine where line and 
paragraph breaks occur. 

So why did we insert our own formatting if 
the browser is just going to ignore it? To help 
us more easily read the document when 
we’re editing the HTML. As your 


HTML documents become more complicated, 
you'll find a few spaces, returns, and tabs 
here and there really help to improve the 
readability of the HTML. 

So there are two levels of headings, 
<h1> and a subheading <h2>? 

Actually there are six, <h1> through 
<h6>, which the browser typically displays in 
successively smaller font sizes. Unless you 
are creating a complex and large document, 
you typically won’t use headings beyond 
<h3>. 

Why do I need the <html> tag? Isn’t 
it obvious this is an HTML document? 

The <html> tag tells the browser your 
document is actually HTML. While some 
browsers will forgive you if you omit it, some 
won’t, and as we move toward "industrial- 
strength HTML” later in the book, you’ll see it 
is quite important to include this tag. 

What makes a file an HTML file? 

An HTML file is a simple text file. 

Unlike a word processing file, there is 
no special formatting embedded in it. By 
convention, we add an “.html” to the end of 
the filename to give the operating system a 
better idea of what the file is. But, as you've 
seen, what really matters is what we put 
inside the file. 

Everyone is talking about HTML5. 
Are we using it? If so, why aren’t we 
saying “HTML-FIVE” instead of “HTML ”？ 

You’re learning about HTML, and 
HTML5 just happens to be the latest version 
of HTML. HTML5 has had a lot of attention 
recently, and that’s because it simplifies 


many of the ways we write HTML and 
enables some new functionality, which 
we’re going to cover in this book. It also 
provides some advanced features through 
its JavaScript application programming 
interfaces (APIs), and those are covered in 
Head First HTML5 Programming. 

Markup seems silly. What-you-see- 
is-what-you-get applications have been 
around since, what, the 70s? Why isn’t 
the Web based on a format like Microsoft 
Word or a similar application? 

The Web is created out of text files 
without any special formatting characters. 
This enables any browser in any part of the 
world to retrieve a web page and understand 
its contents. There are WYSIWYG 
applications out there like Dreamweaver, 
and they work great. But in this book we’re 
going to take it down to the bare metal, and 
start with text. Then you’re in good shape 
to understand what your Dreamweaver 
application is doing behind the scenes. 

Is there any way to put comments 
to myself in HTML? 

Yes, if you place your comments in 
between <!-- and -■> the browser will totally 
ignore them. Say you wanted to write a 
comment “Here’s the beginning of the lounge 
content.” You’d do that like this: 

<!-- Here's the beginning of 
the lounge content --> 

Notice that you can put comments on 
multiple lines. Keep in mind anything you put 
between the and the “■■>’’，even HTML, 
will be ignored by the browser. 
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the language of the web 


^harpen your pencil 


You’re closer to learning HTML than you think... 


Here’s the HTML for the Head First Lounge again. Take a look at the tags and see 
if you can guess what they tell the browser about the content. Write your answers 
in the space on the right; we’ve already done the first couple for you. 


<html> Tells b\rov/sc\r -this is s*ta\rt HTML. 

ttt • 奪 tti 曹 t 會 titttttttttittttiittttttttii • 會 ttittttt 

<head> S*ta\rb -the page “head”（move about this la*tc\r). 

<title>Head First Lounge</title> 

</head> 

<body> 

<hl>Welcome to the Head First Lounge</hl> 

<img src="drinks.gif"> 

<P> . 

Join us any evening for refreshing elixirs , 

conversation and maybe a game or 

two of <em>Dance Dance Revolution</em>. 

Wireless access is always provided; 

BYOWS (Bring your own web server). 

</p> . 

<h2>Directions</h2> . 

<P> . 

You'll find us right in the center of 

downtown Webville. Come join us! 

</p> . 

</body> 

</html> 
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what the markup does 


%iharpen your pencil 

Solution 


<html> 


Tells bvov/sev "tiiis is 七 he s*ta\rt of ttTAIL. 


<head> 

<title>Head First Lounge</title> 
</head> 


S*ta\rb page 

^ives *thc fay a -title. 
Br\d of head. 


<bod y> stav-i of ^ body of J>a 3 c ： 

<hl>Welcome to the Head First Lounge</hl> Tells kov/scr ihai 'Wcldomc boJ is a hcadmj- 
<img src=" drinks, gif ”> P'^ s 

<P> Siav-i o( a pav-ajv-aph. 


Join us any evening for refreshing elixirs , 


conversation and maybe a game or 

two of <em>Dance Dance Revolution</em>. Puts emphasis Da^dc Revolution. 

Wireless access is always provided; 


BYOWS (Bring your own web server). 

</p> 

<h2>Directions</h2> 

<P> 

You'll find us right in the center of 
downtown Webville. Come join us! 

</p> 

</body> 

</html> 


Br\d of pav-ayapli. 

Tells b\rowsc\r *tha*t W Di\red*ticms’’ is a 
S*t3\rt a^o*thc\r pav-ajv-aph- 


Br\d of pav-ajv-apii. 


B-r\d o( *tiic body- 

Tells bv-owsev- -this is *thc of 

ihc ttT/l/IL. 


8 Chapter 1 





















the language of the web 


Your big break at Starbuzz Coffee 

Starbuzz Coffee has made a name for itself as the fastest 
growing coffee shop around. If you’ve seen one on your local 
corner, look across the street — you’ll see another one. 



In fact, they’ve grown so quickly, they haven’t even managed 
to put up a web page yet.. .and therein lies your big break: By 
chance, while buying your Starbuzz Ghai Tea, you run into 
the Starbuzz GEO... 








A. Give dog a bath. 


B. Finally get my checking 
account balanced. 


Decisions, decisions. 
Check your first priority below (choose only one): 


C. Take the Starbuzz gig and 
launch BIG-TIME web career. 




D. Schedule dentist appointment. 
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what goes on the starbuzz page 



Wonderful! We re so 
glad you II be helping us. 
Heres what we need on 
our first page... 


: z_ 






k 




TV.ar.ks U ws a ^ A [ 

上 t 乎 : 

eludes 一外 一 ^ 
avvd dcst^^'o^- 


0 

； to!： d i'^a ot ^ W M.,0, ww-a 

and ^ua-tc^ala- 


Uuve d cs^csso, 


Ca\>?VA66mo, V -^ «_ ^ cawC a ^ ^ oaw ' 


^ d^lade ^ Wa,k lea, s 一 


ml 


,\lk ar\d We7. 


i^iharpen your pencil 


Take a look at the napkin. Can you 
determine the structure of it? In other 
words, are there obvious headings? 
Paragraphs? Is it missing anything like a 
title? 

Go ahead and mark up the napkin (using 
your pencil) with any structure you see, 
and add anything that is missing. 

You’ll find our answers at the end of 
Chapter 1. 


决 |*f by you dhosc op*tion B ， ov~ D on -the previous 

v/c v-c^ommc^d you donate *this book -to a good libv-av-y, 
use i*t as kmdlmg *this w*m*tc\r, o\r *thc hedk, Jo dheddl 
dl^d sell i*t OY\ ^[w\BZjOY\ d^d make some ddsh. 
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the language of the web 


Creating the Starbuzz web page 

Of course, the only problem with all this is that 
you haven’t actually created any web pages yet. 
But that’s why you decided to dive head first into 
HTML ， right? 

No worries, here’s what you’re going to do on 
the next few pages: 


o Create an HTML file using your favorite 
text editor. 

❾ Type in the menu the Starbuzz CEO wrote 
on the napkin. 

❺ Save the file as “index.html”. 

o Open the file “index.html” in your favorite browser, 
step back, and watch the magic happen. 


No pressure, but thousands of 
people are going to visit this web 
page when you re finished. It not only 
needs to be correct, ifs gotta look 
great, too! 
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writing html on a macintosh 



eoe 




(^1 Network 
\ Macintosh HD 



Vou\r Fihdcv- 
sho\rtdu'ts 


Step one: 

Navigate to your Applications folder 

The TextEdit application is in the Applications 
folder. The easiest way to get there is to 
choose New Finder Window from the Finder’s 
File menu and then look for the Application 
directly in your shortcuts. When you’ve found 
it, click on Applications. 

Step two: 

Locate and run TextEdit 

You’ll probably have lots of applications listed 
in your Applications folder, so scroll down until 
you see TextEdit. To run the application, 
double-click on the TextEdit icon. 


Step three (optional): 

Keep TextEdit in your Dock 

If you want to make your life easier, 
click and hold on the TextEdit icon in 
the Dock (this icon appears once the 
application is running). When it displays 
a pop-up menu, choose Options, then 
“Keep in Dock.” That way, the TextEdit 
icon will always appear in your Dock 
and you won’t have to hunt it down in 
the Applications folder every time you 
need to use it. 


u Untitled 


New Document 


Options ► 

〆 Keep in Dock 

Show 

Quit 

Open at Login 
Show in Finder 



Creating an HTML file (Mac) 

All HTML files are text files. To create a text file, you 
need an application that allows you to create plain text 
without throwing in a lot of fancy formatting and special 
characters. You just need plain, pure text. 

We’ll use TextEdit on the Mac in this book; however, if 
you prefer another text editor, that should work fine as 
well. And, if you’re running Windows, you’ll want to skip 
ahead a couple of pages to the Windows instructions. 


「 〜 Finder 


Edit View Go Window Help 



New Finder Window 

昶 N 

New Folder 

OSSN 

Open 

拥 0 

Open With 


Close Window 


Get Info 

拥 1 


<ip I 


: R 


Applications 


a" 


184.2 GB dvaiUblv 


87 ilvuib. 


CD 



n 

Mail 

Preview 

© 

Safari 

今 

Sherlock 

Stickies 

System Preferences 

= ^ \ 

Utilities 


Hive’s 七 Ed’rt. 

1 
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Step four: 

Change your TextEdit Preferences 

By default, TextEdit is in “rich text” 
mode, which means it will add its own 
formatting and special characters 
to your file when you save it — not 
what you want. So, you’ll need to 
change your TextEdit Preferences so 
that TextEdit saves your work as a 
pure text file. To do this, first choose 
the Preferences menu item from the 
TextEdit menu. 




TextEdit 


File Edit Format Window Help 


©ee 

btylcs 


About TextEdit 


Preferences... 


Services 

► 

Hide TextEdit 

KH 

Hide Others X5CH 
Show All 

Quit TextCdit 



Untitled 

bpactnq ^ 1 


•o 


his -Pov-mattiha 
»^cahs 1 

州 ode. f 


you heed -to dhahgc y 财 




y 广 Ve ih 'Wh text" 

f 士 you see -these, 


Step five: 

Set Preferences for Plain text 

Once you see the Preferences dialog 
box, there are three things you need 
to do. 

First, choose “Plain text” as the 
default editor mode in the New 
Document tab. 

In the “Open and Save’’ tab, make 
sure “Ignore rich text commands in 
HTML files” is checked. 

Last, make sure that the “Add .txt 
extension to plain text files” is 
unchecked. 

That’s it; to close the dialog box, 
click on the red button in the top- 
left corner. 


Step six: 

Quit and restart 

Now quit out of TextEdit by choosing 
Quit from the TextEdit menu, and then 
restart the application. This time, you’ll 
see a window with no fancy text formatting 
menus at the top. You’re now ready to create 
some HTML. 


丨 New Document Open and Save 

Format 

Use the Format menu to choose settings for individual do^f 
O Rich text Q Wrap 10 page 

Window Size 

Width: 75 characters 

Height- HI) Ime' 


,Chdfiyt... 


Rich text font： ^Change... 

Properties 


Muria^^l 8 
^ctica 18 


Document 
File 


prop^Tics 


can only be used In rich text files. Choose 
tu (.hunyc ^cttiriy^ fur individudl duLurncn 


Author: 

Organi7ation , 

Copyright: 

Options 

(^1 Check spelling as you t/pe 
口 Check urarnrridr wilh spelling 
0 Correct spelling automatically 
(Vj Shnw rul^r 
(~~) Data detectors 


New Document Open <ind Save 
When Opening a File: 

0 lynurc rich lexi curnrndnd^ in HTML 
C Ignore rich text commands in RTF files 

0 Delete the automatic backup file 
[_J Add _.txt* extension to plain text files 

Autosaving 

Autosave modified documents: 
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writing html on windows 


Creating an HTML file (Windows) 



If you’re reading this page you must be a Windows 7 user. If you’re not, 
you might want to skip a couple of pages ahead. Or, if you just want to sit 
in the back and not ask questions, we’re okay with that too. 


To create HTML files in Windows 7, we’re going to use Notepad — it ships 
with every copy of Windows, the price is right, and it’s easy to use. If 
you’ve got your own favorite editor that runs on Windows 7, that’s fine too 
just make sure you can create a plain-text file with an “.html” extension. 


Oy av\oi\\tr version o-f V^mdov/s 





NoUvad as 


Assuming you’re using Notepad, here’s how you’re going to create your 
first HTML file. 


Step one: 

Open the Start menu and navigate to Notepad. 

You’ll find the Notepad application in Accessories. The 
easiest way to get there is to click on the Start menu, then 
on All Programs, then Accessories. You’ll see Notepad 
.listed there. M/ 
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Step two: 

Open Notepad. 

Once you’ve located Notepad in the 
Accessories folder, go ahead and click on 
it. You’ll see a blank window ready for 




V-Cdomr»\Cir>dicd 

Step three (optional): 

Don’t hide extensions of 
well-known file types. 

By default, Windows File Explorer hides the 
file extensions of well-known file types. For 
example, a file named “Irule.html” will be 
shown in the Explorer as “Irule” without its 
“•html” extension. 

It’s much less confusing if Windows shows you 
these extensions, so let’s change your folder 
options so you can see them. 

First, open Folder Options by clicking the 
Start button, clicking Control Panel, clicking 
“Appearance and Personalization,” and then 
clicking Folder Options. 

Next, in the View tab, under “Advanced 
settings,” scroll down until you see “Hide 
extensions for known file types” and uncheck this 
option. 

That’s it. Click on the OK button to save 
the preference and you’ll now see the file 
extensions in the Explorer. 




Control Panel 

Control Panel Home 

^y\lrrn <«iicl uiify 
Network and Internet 
Hardware and Sound 
Programs 

IKn Ac ( I Mini \ <«nd Family 
S<ifrly 

Appearance and 
Personalization 

ClocK Lanquaqe, and Reqion 
F<rwr erf At c r\\ 


Appearance and Personalization 


Search Coni 


p| 


Personalization 

Change the theme Chongc desktop background 

_ Display 

、 M<ikr Iril ^rui cillnn ilrtm Idiijrr nr vriMlIri AHjiinI m irm rrsoJuliiMi Cimii 
Connect to on extemol display 

De^ktup 

Aild iti Ihf ilt^klnp GH num* unlinp Unidsloll a ijitiicjH 

Restore desktop gadgets installed with Windows 

Tdskbar drid Stdrt Menu 

C uslnrtii/t* Ihr mrmi C iiNlnmi/i* n 11 


mge sound effects Change screen sever 


Ihr rhrtiiiir Ihr tm lurr (in iKe rm 




Ease of Access Center 

Accommodate low vision Use screen reader Turn 





] Folder Opliuns 

， Specify single- or doublc*dick to < 


sy access keys Turn Hiqh Contrast on or off 

w hidden files and folders 


You can apply the view (such as Details or Icons) that 
you are using for this folder to all folders of this type. 


Reset Folders 


Advanced settings: 


Files and Folders 

n Always show icons, never thumbnails 

O Always show menus 

0 Display file icon on thumbnails 

[7] Display file size information in folder tips 

! Display the full path in the title bar (Classic theme only) 

Jjt Hidden files and folders 

(§) Don\ show hidden files, folders, or drives 
O Show hidden files, folders, and drives 
0 Hide empty drives in the Computer folder 




I 




[Vi Hide protected operating system files (Recommended) 


Restore Defaults 


OK 


Cancel 


Apply 
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editors and html 


tJiereiare no ^ 

Dumb Questi9ns 


Why am I using a simple text editor? 
Aren’t there powerful tools like Dreamweaver 
and Expression Web for creating web pages? 

You’re reading this book because you want 
to understand the true technologies used for web 
pages, right? Now those are all great tools, but 
they do a lot of the work for you, and until you 
are a master of HTML and CSS, you want to learn 
this stuff without a big tool getting in your way. 

Once you're a master, however, these tools do 
provide some nice features like syntax checking 
and previews. At that point, when you view the 
“code” window, you’ll understand everything in it, 
and you’ll find that changes to the raw HTML and 
CSS are often a lot faster than going through a 
user interface. You’ll also find that as standards 
change, these tools aren’t always updated right 
away and may not support the most recent 
standards until their next release cycle. Since 
you’ll know how to change the HTML and CSS 
without the tool, you’ll be able to keep up with the 
latest and greatest all the time. 

There are many more fully featured editors that 
include great features like clips (for automatically 
inserting bits of HTML you write often), preview 
(for previewing directly in the editor before you 
test in the browser), syntax coloring (so tags are 
a different color from content), and much more. 
Once you get the hang of writing basic HTML and 
CSS in a simple editor, it may be worth checking 
out one of the fancier editors, such as Coda, 
TextMate, CoffeeCup, or Aptana Studio. There 
are many out there to choose from (both free and 
not). 

I get the editor, but what browser am I 
supposed to be using? There are so many— 
Internet Explorer, Chrome, Firefox, Opera, 
Safari—what’s the deal? 


The simple answer: use whatever browser 
you like. HTML and CSS are industry standards, 
which means that all browsers try to support 
HTML and CSS in the same way (just make sure 
you are using the newest version of the browser 
for the best support). 

The complex answer: in reality there are slight 
differences in the way browsers handle your 
pages. If you’ve got users who will be accessing 
your pages in a variety of browsers, then always 
test your web page in several different browsers. 
Some pages will look exactly the same; some 
won’t. The more advanced you become 
with HTML and CSS, the more these slight 
differences may matter to you, and we’ll get into 
some of these subtleties throughout the book. 

Any of the major browsers—Internet Explorer, 
Chrome, Fi refox, Opera, and Safari—will work 
for most examples (except where noted); they 
are all modern browsers with great HTML and 
CSS support. And as a web developer, you'll 
be expected to test your code in more than one 
browser, so we encourage you to download and 
get familiar with at least two! 

I’m creating these files on my own 
computer—how am I going to view these on 
the Web? 

That’s one great thing about HTML: you 
can create files and test them on your own 
computer and then later publish them on the 
Web. Right now, we’re going to worry about how 
to create the files and what goes in them. We’ll 
come back to getting them on the Web a bit later. 
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Meanwhile back at Starbuzz Coffee... 

Okay, now that you know the basics of creating a plain-text file，you just 
need to get some content into your text editor, save it, and then load it into 
your browser. 




Start by typing in the beverages straight from the CEO’s napkin; these 
beverages are the content for your page. You’ll be adding some HTML 
markup to give the content some structure in a bit, but for now, just get 
the basic content typed in. While you’re at it, go ahead and add “Starbuzz 
Coffee Beverages” at the top of the file. 


like 七 Wis 


vow 


Mat 





Untitled - Notepad 


□ || 回 1(^1 

File Edit Format View Help 


@00 


starbuzz coffee Beverages 
House Blend, $1.49 

A smooth, mild blend of coffees from Mexico, Bol i via and Guatemala. 
Mocha Cafe Latte, 12.35 

Espresso, steamed mi 1 k and ch-ocolate syrup, 
cappuccino ， Si.89 

A .mixture of espresso, steamed mi 1 k and foam, 
chai Tea, $1.S5 

A spicy drink made with black tea, spices f milk and honey.| 
Untitled.txt 


Starbuzz Coffee Beverages 
House Blend, $1.49 

A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. 

Mocha Cafe Latte, $2.35 

Espresso, steamed milk and chocolate syrup. 

Cappuccino, $1.89 

A mixture of espresso, steamed mi Ik and foam. 

Chai Tea, $1.35 

A spicy drink made with black tea, spices, mi Ik and honey. 



iV'mdov/s 
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saving your html 


Saving your work 


Once you’ve typed in the beverages from the CEO’s napkin, you’re going to 
save your work in a file called “index.html”. Before you do that, you’ll want to 
create a folder named “starbuzz” to hold the site’s files. 

To get this all started, choose Save from the File menu and you’ll see a Save As 
dialog box. Then, here’s what you need to do: 

C\'\tV -to 

① First, create a 、、 starbuzz 〃 folder a y\c^ -folded, 

for all your Starbuzz-related 
files. You can do this with the 
New Folder button. 


Mr\doY/s 


r 

Mat 


Save As:! index.html| 


: ► 1 


=nn 1 starbuzz 



DEVICES 

Macintosh HD 
^ Backup 
^ iDisk 

PLACES 

Q Desktop 
headfirst 
六 Applications 
、 Documents 

SEARCH FOR 
Today 

(2 Yesterday 


n 


Plain Text Encoding: Unicode (UTF-8) 


If no extension is provided, use M 


Hide extension New Folder 


Cv-catc a r\cv/ 

-foldcv- hc\rc- 


CUV -bo save 


(2) Next, click on the newly created 
、、 starbuzz’’ folder and then enter 
''index.html" as the filename and click 
on the Save button. 



18 Chapter 1 


































































the language of the web 


Opening your web page m a browser 

Are you ready to open your first web page? Using your 
favorite browser, choose “Open File...” (or “Open...” 
using Windows 7 and Internet Explorer) from the File 
menu and navigate to your “index.html” file. Select it 
and click Open. 




n 


Open 


'◄ ► 1 

r □ □ 

1 do 

=m 1 

. 


starbuzz 



SEARCH FOR 

① Today 
① Yesterday 
① Past Week 
1 .1 All Images 


DEVICES 

r\ 


^ Macintosh HD 



自 Backup 
^ iDisk 


1 HTML | 



PLACES 



口 Desktop 

headfirst 

Applications 

.' Documents 




Cancel Open 


/a 


Mat, ^ 7 歧 

a^d sc\cti .I fey 

cm 七 k Ale 化挪 ^ 
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testing your html 


Take your page for a 
test drive 

Success! You’ve got the page loaded in 
the browser, although the results are 
a little.. .uh.. .unsatisfying. But that’s 
just because all you’ve done so far is go 
through the mechanics of creating a page 
and viewing it in the browser. And so 
far, you’ve only typed in the content of the 
web page. That’s where HTML comes 
in. HTML gives you a way to tell the 
browser about the structure of your page. 
What’s structure? As you’ve already seen, 
it is a way of marking up your text so 
that the browser knows what’s a heading, 
what text is in a paragraph, what text is a 
subheading, and so on. Once the browser 
knows a little about the structure, it can 
display your page in a more meaningful 
and readable manner. 





=H-S il^i 

C:\Users\headfirst\Documents\starbuzz\index.html P ^ C X 

Q ® 

豊 r ： \lJ^pr^\hpaftfirct\Dnriim... 





Starbuzz CoflEee Be\ r erages House Blend, SI.49 A smooth, mild blend of coflFees from Mexico. Bolivia 
and Guatemala. Mocha Cafe Latte. S2.35 Espresso, steamed milk and chocolate syrup. Cappuccino. 
SI 89 A mixture of e<;pre<;<;o. milk and foam Chai Te^i. SI 85 A drtnlc made with hlarlc 

milk* pmd honey 


© o o 


index.html 


< ► 

c | 

+ 



孑 file:///chapterl/starbuzz/index.html 


Starbuzz Coffee Beverages House Blend, SI.49 A smooth, mild blend of coffees from 
Mexico, Bolivia and Guatemala. Mocha Cafe Lartc, S2.35 Espresso, steamed milk 
and chocolate syrup. Cappuccino, $1.89 A mixture of espresso, steamed milk and 
foam. Chai Tea, $1.85 A spicy drink made with black tea, spices, milk and honey. 




Mad 
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Your job is to add structure to the text from the Starbuzz napkin. Use 
the fridge magnets at the bottom of the page to mark up the text 
so that you’ve indicated which parts are headings, subheadings and 
paragraph text. We’ve already done a few to get you started. You won’t 
need all the magnets below to complete the job; some will be left over. 


| <hl> 

S 

tarbuzz Coffee Beverages 


</hl> | 





House Blend, $1.49 

A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala. 



cha Cafe Latte, $2.35 


</h2> 


pres so, steamed milk and chocai^kte syrup. 


</p> 


Cappuccino, $1.89 

A mixture of espresso , steamed milk and foam. 


Chai Tea, $1.85 

A spicy drink made with black tea, spices, milk and honey. 


画_ 固學 _ 

this 

- ^ 4 V. Ti>i< - i-Wtc I i 11 . 


Use -this rwa^C*t 

*to s*ta\rt 3 、 V ^ sc 仏 _ s 

Use 七 Wis maye 七 Use tiiis -to tt\A a 

*to end a Kcad'm^. ^ s *ta\rt a subheadmg. 

subiicadi'm^. 


Use tW»s 
start a 

^ava^a^. 


Use this rwayet 
■fco tt\A a 
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your first html markup 



Congratulations, 
you ye just written 

your first HTML! 

They might have looked like fridge 
magnets, but you were really marking up 
your text with HTML. Only, as you know, 
we usually refer to the magnets as tags. 
Check out the markup below and compare it to 
your magnets on the previous page. 



丄 W ： oU& k ad 吶 . 


<h2>House Blend, $1.49</h2> 

<p>A smooth, mild blend of coffees from Mexico, Bolivia 


and Guatemala .</p> 


<h2>Mocha Cafe Latte, $2.35</h2> 


<p>Espresso, steamed milk and chocolate syrup • </p> 


<h2>Cappuccino , $1.89</h2> 


<p>A mixture of espresso, steamed milk and foam.</p> 


<h2>Chai Tea, $1.85</h2> 


<p>A spicy drink made with black tea, spices, milk and 


honey.</p> 






The <VL> a^d </VL> tajs 
a\rou^d a 

Thmk o-f By\ <\\ 2 > hcadmj 
as a <hl> 



The < ? > ah d </ P > ia 9 s 
9° amouhd a blo^k o( 
text that is a pavagvaph. 
That fidh be OhC ov- 




n\^v\y 


you like putas " udh ^ 
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Arc wg there yet? 

You have an HTML file with markup — does that make a web page? Almost. 
You’ve already seen the <html>, <head>, <title>, and <body> tags, and 
we just need to add those to make this a first-class HTML page … 


P'lV-S*t> SUVVOU'd Y 0uV " WTML 

-bay. TWis -tells -tv^c kroy/sev 

-tKc ,s 

HTML . 、 


<html> 


<head> 




add <^ad> f 心二 I 

V,ead 。:以 “ 士 

⑽二 

相 c . 


<title>Starbuz z Coffee</ title> 


</head> 


oUk WoYiSCV 


The head do^sists o( -the <hcad> 

f <Acad> tags cvcvy-thmg 

ih bciv/CCh- 


<body> 


<hl>Starbuzz Coffee Beverages</hl> 

<h2>House Blend, $1.49</h2> 

<p>A smooth, mild blend of coffees from Mexico, 
Bolivia and Guatemala • </p> 

<h2>Mocha Cafe Latte, $2.35</h2> 

<p>Espresso, steamed milk and chocolate syrup. </p> 
<h2>Cappuccino , $1.89</h2> 

<p>A mixture of espresso, steamed milk and foam. </p> 


TKc kodY £-oy\s»s*U 
of i\\t <kodY> 
f </bodY > 

如 d cvcvytW ， m 

brbwee 灼 . 


<h2>Chai Tea, $1.85</h2> 

<p>A spicy drink made with black tea, spices, 
milk and honey .</p> 


</body> 


</html> 


Thc b °dy ^Oh-taihs all the dohlch-t ahd 
siruUrc of you^r web p ， 一 the pa 士 
the web page that you see \v\ youv- bv^oww. 
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another test with some markup 


Another test drive 


Go ahead and change your “index.html” file by adding 
in the <head>, </head>, <title>, </title>, <body> and 
</body> tags. Once you’ve done that, save your 
changes and reload the file into your browser. 


tix 工 ad : °" 

fey — Y— WoWs reload Wtw 


Notldc title, 

y^\\\cM you spcd'i-f icd \y\ 

*tKc <iicad> element 

sKo>ws up iicv-c- 


Vj/ 


H 0 0 ^ 

Starbuzz Coffee 



file:///chapterl/starbuzz/index.html 


Koy/ look a \)\i kettev 

TV Woy/scv V^as m*tcvpv-ctcd 
Youv ay\d crea 七 cd a 
d\sf lay tor -tV^c ^ay 
is yyoi oA^ s 七 yrud^red, 

bu*t aUo wove \rcaddblc. 



Starbuzz Coffee Beverages 

House Blend, $1.49 

A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala. 

Mocha Cafe Latte, $235 

Espresso, steamed milk and chocolate syrup. 

Cappuccino, $1.89 

A mixture of espresso, steamed milk and foam. 


Chai Tea, $1.85 


spicy drink made with black tea, spices, milk and honey. 




A 
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Tags dissected 

Okay ， you’ve seen a bit of markup, so let’s zoom in 
and take a look at how tags really work. 



You usually lay a^rou^d some 

Here y/cVc tajs *to tell tVic brov/scr ou^r 

仏士 此 w SWUz^ CoW« Bcvcrajcs, *.S a to ? - 
level V^eddi^ is, ^c3dnr\^ level oir\c 


ttcv-c^s -the -tag 

七 bejms 七 he tiedd'm^. 







<hl> Starbuzz Coffee Beverages </hl> 


TWis \s ^ 

m tW»s cast <AI> 

W、 s <w> 

kadK A » 七 5 

ad — 嘈 

\t tor.es a^tev 

dosmoy-tay v^avc a / 

m t—. 


T 


tV,at »s, tV^e < a.d > ^ a6tc 


The whole sheba^j is dal led a 朽 element |ir\ -this ddse ； we 
d 扣 ^dll i*t *thc <hl> element clcrr»c^*t Consists -the 

cr\dlos*mj -tajs Bv\d 七 he dorrt ⑶七 m between. 


A 


\A/ C tall 0—03 

办 d vb tlosmoy *ta^ 

w a*bV\'m^ *tay- 


To tell the browser about the structure of your 
page, use pairs of tags around your content. 

Remember: 

Element = Opening Tag + Content + Closing Tag 
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elements and matching tags 


tJiereiare no ^ 

Dumb Questi9ns 


So matching tags don’t have to be 
on the same line? 

No; remember the browser doesn’t 
really care about tabs, returns, and most 
spaces. So, your tags can start and end 
anywhere on the same line, or they can start 
and end on different lines. Just make sure 
you start with an opening tag, like <h2>, and 
end with a closing tag, like </h2>. 

Why do the closing tags have that 
extra “/”? 

That T in the closing tag is to help 
both you and the browser know where a 
particular piece of structured content ends. 
Otherwise, the closing tags would look just 
like the opening tags, right? 


I’ve noticed the HTML in some 
pages doesn’t always match opening tags 
with closing tags. 

Well, the tags are supposed to match. 
In general, browsers do a pretty good job 
of figuring out what you mean if you write 
incorrect HTML. But, as you’re going to see, 
these days there are big benefits to writing 
totally correct HTML. If you’re worried you’ll 
never be able to write perfect HTML, don’t 
be; there are plenty of tools to verify your 
code before you put it on a web server so 
the whole world can see it. For now, just get 
in the habit of always matching your opening 
tags with closing tags. 

Well, what about that <img 
src=“drinks_gif”> tag in the lounge 
example? Did you forget the closing tag? 

Wow, sharp eye. There are some 
elements that use a shorthand notation with 
only one tag. Keep that in the back of your 
mind for now, and we’ll come back to it in a 
later chapter. 


An element is an opening tag + 
content + closing tag, but can’t you have 
tags inside other tags? Like the <head> 
and <body> are inside an <html> tag? 

Yes, HTML tags are often “nested” 
like that. If you think about it, it’s natural 
for an HTML page to have a body, which 
contains a paragraph, and so on. So many 
HTML elements have other HTML elements 
between their tags. We’ll take a good look 
at this kind of thing in later chapters, but 
for now just get your mind noticing how the 
elements relate to each other in a page. 





Tags can be a little more interesting than what you’ve seen so far. Here’s the 
paragraph tag with a little extra added to it. What do you think this does? 

<p id= ff houseblend T! >A smooth, mild 
blend of coffees from Mexico r Bolivia 
and Guatemala.</p> 
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Eic^rciS^ 


Oh,I forgot to mention, 
we need our company mission 
on a page, too. Grab the mission 
statement off one of our coffee 
cups and create another page 
for it... 


O 


0 


S 秘 Coffee s 

fission 

To provide all the 

caffeine that you 

need to power your 

life. 

just drink it. 


eee 


mission.html 


Q Write the HTML for the new 
"mission.htmr , page here. 




❾ Type in your HTML using a text 
editor, and save it as “mission, 
html” in the same folder as your 
“index.html” file. 


❺ Once you’ve done that, open 
"mission.htmr , in your browser. 


o Check your work at the end of 
the chapter before moving on. 
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using css for style 



Okay, it looks like you re 
getting somewhere. You've got the 
main page and the mission page all set. 
But don’t forget the CEO said the site 
needs to look great too. Don*t you think 
it needs a little style? 


Right. We have the 
structure down，so now 
we’re going to concentrate 
on its presentation. 


You already know that HTML gives 
you a way to describe the structure 
of the content in your files. When the 
browser displays your HTML, it uses 
its own built-in default style to present 
this structure. But relying on the 
browser for style obviously isn’t going 
to win you any “designer of the month’’ 
awards. 


That’s where CSS comes in. CSS 
gives you a way to describe how your 
content should be presented. Let’s get 
our feet wet by creating some CSS that 
makes the Starbuzz page look a little 
more presentable (and launch your 
web career in the process). 



Shcc-ts. W^\\ 
whai -tha-t all 

bu-t fom how 

j us "t -that C££ 

Jives you a way -to 

b\rowscv- how 
clcr^ch-ts ih youv- p 糾 e 
should look. 
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Meet the style element 


To add style, you add a new (say it with us) E-L-E-M-E-N-T 

to your page 一 the <style> element. Let’s go back to the , . > * j tV'C 

main Starbuzz page and add some style. Check it out... TV>c <s ^7 c> t 

kad d 7 祕 HTMU 

Jus*t like o-tKcv- clcmcv>*b, *tKc <s*tylc> 
iids of ⑼ m3 <stylc>, 

ay>d a tlosm^ </ stylo- 


<html> 


<head> 


<title>Starbuzz Coffee</ title> 
<style type= M text/css"> 


</style> 


</head> 

<body> 



<hl>Starbuzz Coffee Beverages</hl> 


The <s*tylc> tag also has by\ (optional) 
atbribu*ie, called -type, v/hidh -tells -the 
bv-ov/sev- 七 he kmd o-r s-tyle youVc us'm^. 
Because youVc jomj *bo use CSS ； you CBy\ 
spe^i-fy 七 he w -tcx.*t/dss w -type- 


heve’s y/hc\rc youVc 

? o*mj *to dc-fmc *thc s-tylcs 
< 


rov- 七 he pajc- 


<h2>House Blend, $1.49</h2> 

<p>A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala • </p> 


<h2>Mocha Caffe Latte, $2.35</h2> 

<p>Espresso, steamed milk and chocolate syrup • </p> 


<h2>Cappuccino, $1.89</h2> 

<p>A mixture of espresso, steamed milk and milk foam. </p> 

<h2>Chai Tea, $1.85</h2> 

<p>A spicy drink made with black tea, spices, milk and honey. </p> 
</body> 

</html> 


thereicire no ^ 

Dumb Questions 


An element can have an “attribute ”？ What does that 
mean? 

Attributes give you a way to provide additional information 
about an element. Like, if you have a <style> element, the attribute 
allows you to say exactly what kind of style you’re talking about. 
You'll be seeing a lot more attributes for various elements; just 
remember they give you some extra info about the element. 


Why do I have to specify the type of the style (“text/css”) 
as an attribute of the style? Are there other kinds of style? 

At one time the designers of HTML thought there would be 
other styles, but as it turns out we’ve all come to our senses since 
then and you can just use <style> without an attribute—all the 
browsers will know you mean CSS. We’re disappointed; we were 
holding our breath for the〈style type=“50sKitsch”> style. Oh well. 
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adding a style element 


living Starbuzz some style 


Now that you’ve got a <style> element in the HTML head, all you need to 
do is supply some CSS to give the page a little pizzazz. Below you’ll find some 
CSS already “baked” for you. Whenever you see the ^ logo, you’re 
seeing HTML and CSS that you should type in as-is. Trust us. You’ll learn how 
the markup works later, after you’ve seen what it can do. 


So, take a look at the CSS and then add it to your “index.html” file. Once 
you’ve got it typed in, save your file. 


<html> 


<head> 

<title>Starbuzz Coffee</title> 

<style type= n text/css"> 
body { 

background-color : #d2b48c; 
margin-left: 20%; 
margin-right : 20% ; 
border : 2px dotted black; 
padding : lOpx lOpx lOpx 1Opx; 
font-family : sans-serif; 

} 

</style> 

</head> 



■ k 侧 Ba^ 

C§§ 


C£S uses a ba 七 

•,s -bo-ballY d/Wh 七 
W HTML. 


<body> 

<hl>Starbuzz Coffee Beverages</hl> 

<h2>House Blend, $1.49</h2> 

<p>A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala • </p> 


<h2>Mocha Caffe Latte, $2.35</h2> 

<p>Espresso, steamed milk and chocolate syrup • </p> 


<h2>Cappuccino, $1.89</h2> 

<p>A mixture of espresso, steamed milk and milk foam. </p> 

<h2>Chai Tea, $1.85</h2> 

<p>A spicy drink made with black tea, spices, milk and honey. </p> 
</body> 

</html> 
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the language of the web 


Cruisin' with style... 

It’s time for another test drive, so reload your “index.html” file again. 
This time, you’ll see the Starbuzz web page has a whole new look. 


Ba^kgvouhd to\o>r is ^ow 


|s(oy/ V/C V^avc 

avouv\d *kV^c 


Wc'vc jot a bld^k dotted border 
d\rouy\d 七 . 


Thcvc’s ⑽別 some 

? ad<M tV'C 

(oy\ dll s'»dcs). 


WlcVc us'mj d 

di*WWe 灼七 -for\*b -fov- 
a dearer look. 



OB0 Slarbuzz Coffee 

[C I [ + ] ■? filp7//rhApfpriy^tArhu77/indPx.html 


Starbuzz Coffee Beverages 

House Blend, $1.49 

A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala. 

Mocha Caffe Latte, $2.35 

Espresso, steamed milk and chocolate syrup. 

Cappuccino, $1.89 

A mixture of espresso, steamed milk and milk foam. 

Chai Tea, $1.85 

A spicy drink made with black tea, Gpiccs, milk and honey. 




If you're using IE, 
you might not see 
the border- 

Internet Explorer 
does not display the 


border around the body correctly. 
Try loading the page in Firefox, 
Chrome or Safari to see the border. 
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looking more closely at css 




命 




Even though you’ve just glanced at CSS, you’ve already begun to see 
what it can do. Match each line in the style definition to what it does. 


background-color : 


margin-left : 20%; 
margin-right : 20% 


border : 2px dotted 



padding : lOpx lOpx lOpx lOpx; 


font-family : sans-serif; 


s 


Defines the ¥ontt9 use text- 


Defines a bolder 取 9imd ihe body thctt is 

dotted cind the color black. 


Sets the left and vi^ht niarglns t9 take up 
20% o? the page e^cji. 

Sets the background colot fo 伽 . 

Crecites some padding around the body o? 
the page. 


CSS looks like a totally different 
language than HTML Why have two 
languages? That’s just more for me to 
learn, right? 

You are quite right that HTML and 
CSS are completely different languages, 
but that is because they have very different 
jobs. Just like you wouldn’t use English to 
balance your checkbook, or math to write a 
poem, you don’t use CSS to create structure 
or HTML to create style because that’s not 
what they were designed for. While this does 
mean you need to learn two languages, 



you’ll discover that because each language 
is good at what it does, this is actually easier 
than if you had to use one language to do 
both jobs. 

Q/ #d2b48c doesn’t look like a color. 
How is #d2b48c the color “tan”? 

There are a few different ways to 
specify colors with CSS. The most popular is 
called a “hex code," which is what #d2b48c 
is. This really is a tan color. For now, just go 
with it, and we’ll be showing you exactly how 
#d2b48c is a color a little later. 


Why is there a “body” in front of 
the CSS rules? What does that mean? 

The “body” in the CSS means that all 
the CSS between the “{” and “}” applies to 
content within the HTML <body> element. So 
when you set the font to sans-serif, you’re 
saying that the default font within the body of 
your page should be sans-serif. 

We’ll go into a lot more detail about how 
CSS works shortly, so keep reading. Soon, 
you’ll see that you can be a lot more specific 
about how you apply these rules, and by 
doing so, you can create some pretty cool 
designs. 
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the language of the web 



Now that you’ve put a little style in the Starbuzz “index.html” page, go ahead and 
update your "mission.htmr , page to have the same style. 


o Write the HTML for the “mission.html” page below, and then 
add the new CSS. 

❾ Update your “mission.html” file to include the new CSS. 

o Once you’ve done that, reload “mission.htmr in your browser. 

o Make sure your mission page looks like ours at the end of the 
chapter. 


0 0 © 


mission.htmE 
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content and style 


Fireside Chats 

卿 


Tonight’s talk ： HTML and CSS on content and style 


HTML CSS 

Greetings, CSS; I’m glad you’re here because I’ve 
been wanting to clear up some confusion about us. 

Really? What kind of confusion? 

Lots of people think that my tags tell the browsers 
how to display the content. It’s just not true! I’m all 
about structure, not presentation. 

Heck yeah — I don’t want people giving you credit 
for my work! 

Well, you can see how some people might get 
confused; after all, it’s possible to use HTML 
without CSS and still get a decent-looking page. 

“Decent” might be overstating it a bit, don’t you 
think? I mean, the way most browsers display 
straight HTML looks kinda crappy. People need 
to learn how powerful CSS is and how easily I can 
give their web pages great style. 

Hey, I’m pretty powerful too. Having your content 
structured is much more important than having it 
look good. Style is so superficial; it’s the structure of 
the content that matters. 

Get real! Without me, web pages would be pretty 
damn boring. Not only that, but take away the 
ability to style pages and no one is going to take 
your pages seriously. Everything is going to look 
clumsy and unprofessional. 

Whoa, what an ego! Well, I guess I shouldn’t expect 
anything else from you — you’re just trying to make 
a fashion statement with all that style you keep 
talking about. 
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HTML CSS 

Fashion statement? Good design and layout can 
have a huge effect on how readable and usable 
pages are. And you should be happy that my 
flexible style rules allow designers to do all kinds 
of interesting things with your elements without 
messing up your structure. 

Right. In fact, we’re totally different languages, 
which is good because I wouldn’t want any of your 
style designers messing with my structure elements. 

Don’t worry, we’re living in separate universes. 

Yeah, that is obvious to me any time I look at 
CSS — talk about an alien language. 

Yeah, like HTML can be called a language? Who 
has ever seen such a clunky thing with all those 
tags? 

Millions of web writers would disagree with you. 

I’ve got a nice clean syntax that fits right in with the 
content. 

Just take a look at CSS; it’s so elegant and 
simple, no goofy angle brackets <around> 
〈 everything〉. <See> <I> <can><talk> 

<j ust> <like> <Mr. ><HTML>< ? > <look> < at> 
<me><!> 

Hey, ever heard of closing tags? 

Just notice that no matter where you go, I’ve 
got you surrounded by <style> tags. Good luck 
escaping! 

Ha! I’ll show you.. .because, guess what? I can 
escape... 

S*tay *buir\cdf 
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review of basic html and css 


Not only is this one fine cup of 
House Blend, but now weve got 
a web page to tell all our customers about 
our coffees. Excellent work. Ive got some 
bigger ideas for the future; in the meantime, 
can you start thinking about how we are 
going to get these pages on the Internet so 
other people can see them? 


O 










BULLET POINTS 



■ HTML and CSS are the languages we use to create 
web pages. 

■ Web servers store and serve web pages, which are 
created from HTML and CSS. Browsers retrieve 
pages and render their content based on the HTML 
and CSS. 


■ Closing tags have a T after the left angle bracket, 
in front of the tag name, to distinguish them as 
closing tags. 

■ Your pages should always have an <html> element 
along with a <head> element and a <body> 
element. 


■ HTML is an abbreviation for HyperText Markup 
Language and is used to structure your web page. 

■ CSS is an abbreviation for Cascading Style Sheets, 
and is used to control the presentation of your 
HTML. 

■ Using HTML, we mark up content with tags to 
provide structure. We call matching tags, and their 
enclosed content, elements. 

■ An element is composed of three parts: an opening 
tag, content, and a closing tag. There are a few 
elements, like <img>, that are an exception to this 
rule. 

■ Opening tags can have attributes. We’ve seen one 
already: type. 


■ Information about the web page goes into the 
<head> element. 

■ What you put into the <body> element is what you 
see in the browser. 

■ Most whitespace (tabs, returns, spaces) is ignored 
by the browser, but you can use it to make your 
HTML more readable (to you). 

■ You can add CSS to an HTML web page by 
putting the CSS rules inside the <style> element. 
The <style> element should always be inside the 
<head> element. 

■ You specify the style characteristics of the elements 
in your HTML using CSS. 
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HTMLcross 


It’s time to sit back and give your left brain something to do. It’s your 
standard crossword; all of the solution words are from this chapter. 



Across 

2. The "M" in HTML. 

8. Tags can have these to provide additional information. 
10. Browsers ignore this. 

12. You define presentation through this element. 

13. Purpose of <p> element. 

15. Two tags and content. 

17. What you see in your page. 

18. We emphasized Dance_Revolution. 


Down 

I. There are six of these. 

3. CSS is used when you need to control this. 

4. You mark up content to provide this. 

5. Appears at the top of the browser for each page 

6. Style we wish we could have had. 

7. Company that launched your web career. 

9. Only type of style available. 

II. Always separate these in HTML. 

14. About your web page. 

16. Opening and closing. 
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exercise solutions 


^harpen your pencil 
亀 、 Solution 


Go ahead and mark up the napkin (using your pencil) with any 
structure you see, and add anything that is missing. 


(vfot 50 * 1^5 *to be 

v/ck pay 




M A a 辦 

I C^ec a,d^4^s. 

^>1 ^cvcvays 


如 a% 


and Guatemala- 少 _ 




卜 otw 


v,\)VeaA'^ ■ _"" 








W WT 
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the language of the web 


^ ar ^ u P Magnets Solution 

^ ^ - Ym ir inh wpk tn pjHH <;nmp <;tri irti irp to thp tpyt 


Your job was to add some structure to the text from the Starbuzz 
napkin. Use the fridge magnets at the bottom of the page 
to markup the text so that you’ve indicated which parts are 
headings, subheadings, and paragraph text. Here's our solution. 


I <hl> I s 



tarbuzz Coffee Beverages 


ouse Blend, $1.491 </h2> 


1 </ hi EI 


smooth, mild from Mexico, Bolivia and 

uatemala. 







locha Cafe Latte, $2.35 
spresso, steamed milk 




te syrup 


appuccino, $1.89 
mixture of espr 


hai Tea, $1.85 
spicy drink 


p/h2>| 




ed milk and foam 




lack tea, spices, milk and honey. 
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exercise solutions 




©00 mission.html 

<html> 

<head> 

<title>Starbuzz Coffee * s Mission</title> 

</head> 

<body> 

<hl>Starbuzz Coffee * s Mission</hl> 

<p>To provide all the caffeine that you need to 
power your life • </p> 

<p>Just drink it. </p> 

</body> 

</html> 


A 


0 O O 


Starbuzz Coffee's Mission 




file:///chapter l/starbuzz/inission.html 


Starbuzz Coffee’s IVOssion 


To provide all the caffeine that you need to power your life. 


Just drink it. 


A 


HTML- 


“Whe HT/VJL 
dis P_d “ b^owsc^. 
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SpLviipH 


ttcvc^s *thc CSS *m *tV>c 

mission pa^c- 


Kov/, *tV^c sbj\t w\a*t^V>cs 

-tKc md'rn S-tav-kuzi pay. 


u 


©00 


mission.htmi 


<html> 

<head> 

<title>Starbuzz Coffee's Mission</title> 

<s-tylc -type— w -tcx.t/ tss l > 
body { 

b3dk^vouif>d—tolov* ： 养 dZb 午 
Ic-p-t ： ZO %； 
vi^-t ： 7-0%'j 

bovdcv ： Zfx. dotted bla 匕 k; 

paddmy lOpx. lOpx. IO\>% lO^y .； 
saif\s—scvi-f ； 

} 

</s-tylc> 

</head> 

<body> 

<hl>Starbuzz Coffee's Mission</hl> 

<p>To provide all the caffeine that you need to power 
your life.</p> 

<p>Just drink it.</p> 

</body> 

</html> 


A 


000 _ Starbuzz Coffee's Mission 

tmizis' 5 file:///chapterl/starbuzz/mission.html 


Starbuzz Coffee's Mission 

To provide all the caffeine that you need to power your life. 
Just drink it. 
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Even though you’ve just glanced at CSS, you’ve already seen the beginnings of 
what it can do. Match each line in the style definition to what it does. 


background-color : #d2b48c; 


margin-left: 20%; 
margin-right : 20%; 


border : 2px dotted black; 


padding : 10px 10px 10px 10px; 


font-family : sans-serif; 



Defines tK© fonttQ use fcr text 


Defines a border ciround tK© bojy 
ihai Is dotted and the color black. 


Sets the left 职 d rlgk niatgins t9 
take up 20% rf t}ie pcig© eacji. 

Sets the background color t9 tan. 


Crecttes some pctdc[!ng aTQunJ the 
bojy rf the pcige. 


Ph 
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A 
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2 going fortlier with hypertext 肴 

^Meeting the “HT ，， 7n HTML 



Did someone say “hypertext?” What’s that? oh, only the entire 

basis of the Web. In Chapter 1 we kicked the tires of HTML and found it to be a nice 
markup language (the “ML” in HTML) for describing the structure of web pages. Now 
we’re going to check out the “HT” in HTML, hypertext, which will let us break free of 
a single page and link to other pages. Along the way we’re going to meet a powerful 
new element, the <a> element, and learn how being “relative” is a groovy thing. So, 
fasten your seat belts — you’re about to learn some hypertext. 


this is a new chapter 
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improving the head first lounge 


Head First Lounge new and improved 

Remember the Head First Lounge? Great site, but wouldn’t it be nice if 
customers could view a list of the refreshing elixirs? Even better, we should 
give customers some real driving directions so they can find the place. 


ttcirc s -the 
iruproved 

P a 9 c - 


lAfe’ve added 
I'mks bo buo 

Y\t^l fays, OY\t 

-po\r 

oY\t -fo\r dbrW’n^ 
div-C^t»or\S. 


e e e 


Head First Lounge 

A ► 

. , ^ 

c 

+ ^ file:///chapter2/completelounge/lounge l htm! 




Welcome to the New and Improved 
Head First Lounge , 辦 

—■ 一以多一 。: 







Join us any evening for refreshing elixirs, conversation arid maybe a game or 
two of Dance Dance Revolution. Wireless access Is always provided; 
BYOWS (Bring Your Own Web Server). 

Directions 

You 11 find us right in the center of downtown WcbvlMc. If you need help 
finding us, check out our detailed directions . Conic join us! 

\ 


0OO 


回 


Head First Lounge Directions 



file:///chaDter2/completelounge/about/directjons.html 


Directions 


The iK Atiai\\tA d'»v-c^o^s 
Uk leads -to a, HTML 
^ dvWm^ 


Take the 305 S exit to Wcbvillc - go 0.4 mi 

Continue on 305 - go 12 mi 

Turn right at Structure Avc N - go 0.6 mi 

Turn right and head toward Structure Avc N - go 0.0 mi 

Turn right at Structure Avc N - go 0.7 mi 

Continue on Structure Avc S - go 0.2 mi 

Turn right at SW Presentation Way - go 0.0 mi 




div-c^tiohS.h-trwl 


4 
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going further with hypertext 


000 

^"nr^ir+i 


Head First Lounge Elixirs 




file:///chapter2/completelounge/beverages/elixir.html 



Our Elixirs 


Green Tea Cooler 



v Chock full of vitamins and minerals, this elixir combines the healthful benefits of 
green tea with a twist of chamomile blossoms and ginger root. 


Raspberry Ice Concentration 


Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy 
drink will make your mind feel clear and crisp. 


Blueberry Bliss Elixir 



- Blueberries and cherry essence mixed into a base of cldcrflowcr herb tea will put 
you in a relaxed state of bliss in no time. 


Cranberry Antioxidant Blast 



Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir. 






Vis 七， m 
ay>a 

avmks. M 

oy^e V)cW o 〜 



Creating the new and improved 
lounge in three steps... 

Let’s rework the original Head First Lounge 
page so it links to the two new pages. 



The first step is easy because we’ve already 
created the “directions.html” and 
“elixir.html” files for 
you. You’ll find them 
in the source files for 



the book, which are 

available at http : / / wickedlysmart. com/ 
hfhtmlcss. 


❾ 


Next you’re going to edit the “lounge.html” 
file and add in the HTML needed to link to 


“directions.html” and “elixir.html”. 


❺ 


Last, you’ll give the pages a test drive and 
try out your new links. When you get back, 
we’ll sit down and look at how it all works. 


Flip the page and let’s get started... 
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looking at the source files 


Creating the new lounge 

O 备 rab the source files 

Go ahead and grab the source files from http : / / wickedlysmart. com/hf htmlcss, 
Once you’ve downloaded them, look under the folder “chapter2/lounge’’ and you’ll 
find “lounge.html’’ ， “elixir.html”，and “directions.html” (and a bunch of image files). 

v 




You II ^ 

Km 7 。吖 so[A]cU CS， 




(Sapter? 




^11 louy\C|C -files f 

—v——. 

lounge 

av-c m {\\\s -foldcv*. 

__ 


/W \\trcs dll 
images needed 
-fo\r oiaV" 
impv-ovcd 




Two y\c^j -files, alv-cady 
-fov- you. 6\o 

ahead take a 

peck — you already k^ow 

丄 cvc\ry*th*m^ you ^ccd *to 
u^dcv-s*ta^d -them- 


directions.html 

• • • 

•• •• •• 

參 ** "拳 

••'I IOOI 今 ... 
.... lilioioJ 
• looioiol 
lioiollj 

‘ —~K green.jpg 

loot 

liioiool-, 

0010101 •. 

lOlOlllj •• —K. 

- ^ 1001 

drinks.gif moiodi 

oo\o\o\ 

ipioiijj 

red.jpg 



.11001 
liiioiocj 
0010101 
IjoiomJ 

blue.jpg 

I tool 
liiioiocj 

OOIOIOI 

lioiolljj 

lightblue.jpg 





The Head First Lounge is already growing; do you think that keeping all the site’s files in a 
single directory is a good way to organize the site? What would you do differently? 
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going further with hypertext 


O Edit lounge.html 

Open “lounge.html” in your editor. Add the new text and HTML that is highlighted below. 
Go ahead and type this in; we’ll come back and see how it all works on the next page. 


<html> 

<head> 

<title>Head First Lounge</ title> 
</head> 

<body> 

<hl>Welcome to the New and Improved 

<img src= M drinks.gif n > 


7 Lets add w Kcv/ ar,a -to “ad” 

t 

Head First Lounge</hl> 

>/c 3dd HTAIL- -Pov* "the 


<P> 

Join us any evening for 
refreshing <a href= n elixir.html M >elixirs</ a> r 
conversation and maybe a game or two of 
<em>Dance Dance Revolution</em>. 


I 


t 




"Yo tv-ca*tc Imks, v/c use "tKc 

<a> II "take a 

look a-t V>ov/ *tWis ele 眯 wt 

y/ov*ks m jus*t B set … 


Wireless access is always provided; 


BYOWS (Bring your own web server). 

</p> 

<h2>Directions</h2> 


y\ccd *to sdd some 七七 
Ucrc bo tusWc'rs *to 
七 V^c d'iv-ct*t'»oyvs. 


<p> 


You'11 find us right in the center of downtown Webville. 
If you need help finding us, check out 

our <a href="directions.html n >detailed directions</a>. 



Come join us! 

</p> 

</body> 

</html> 



f\Y\d here’s whcv-c v/c add \\rk b> the di\red*tio 竹 s, aja'm usmj by\ 

<a> element 


O Save lounge.html and give it a test drive. 

When you’re finished with the changes, save the file “lounge.html” and open it in 
your browser. Here are a few things to try: 


O Click on the elixir link and the new elixir page will display. 

❺ Click on the browser’s back button and “lounge.html” 
should be displayed again. 

O Click on the directions link and the new directions page 
will display. 


you are here ► 
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how to create links 


Okay, Ive loaded the new 
lounge page, clicked the links, 
and everything worked. But I 
want to make sure I understand 
how the HTML works. 



Behind 
ike Scenes 



What did we do? 


① 


Let's step through creating the HTML links. First, we need to put 
the text we want for the link in an <a> element, like this ： 


<a>elixirs</a> 


<a>driving directions</a> 


， ， cl ^ cy)i js > 



P 吵 . 


TKc Cov\itv\i <a> is i\\t Tmk 七卜 

■tKc bvoy/scv, *tKc I'mk appeals W\i\\ u^dcvl'mc *to 
'mditatc you 乙 a 灼 didk o 灼 i 七 • 


② Now that we have text for the link, we need to add some 
HTML to tell the browser where the link points to: 


<a href= n elixir.html n >elixirs</a> 

/ . 

The hv-c-f a*t*tv-ibu*tc is 

hov/ you spedi+y *thc 
destination or Imk. 



Fov tWis Imk, \yro^tr 

displav u cl«^s 

ticked, Will take usev 

{jo -tV^c V ⑷ v.VvW” ? a 5 c * 




(ov "this Imk, the bv-ov/sc\r y/ill display a 
ll d\riv'mj div-cdtior\s w I'mk 仏此 y/hcr\ dlidked, will 
take -the usev- -to -the w div-cd-tio^s.h-tr»\l w page. 


<a href= n directions . html 11 >driving directions</a> 


48 Chapter 2 






going further with hypertext 


What does the browser do? 


① First, as the browser renders the page, if it encounters an <a> 
element, it takes the content of the element and displays it 
as a clickable link. 


Behind 


ike Scenes 




<a href= n elixir.html ff >elixirs</a> 


000 


Both 扣 dl u dc*ba'«lcd 

{: \o^ a^rc *tKc 

〒於 m3 ad tlos'm^ <a> lay ， 
so -tKcy u\> kc'm^ tl'itkablc 
■tc/i *tV^c >wcb pay. 





Head First Lounge 

file:///chapter2/lounge/lounge.html 


o 


Welcome to i5^e New and Improved Head First 
Lounge 


Join us any evening for refreshing elixirs, conversation and maybe a game or two of Dance Dance 
Revolution. Wireless access is always provided; BYOWS (Bring Your Own Web Server). 

Directions 

You'll find us right in the center of downtown Wcbvillc. If you need help finding us, check out our 
detailed directions. Come join us! 





<a href= n directions.html n >detailed directions</a> 


Use tke <a> element to create a kypertext link to anotker we 
Tke content ol tke <a> element becomes clickable in tke weL ] 
Tke krei attribute tells tke browser tke ctestination ol tke tin 



you are here ► 
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how links work 


② Next, when a user clicks on a link, the browser uses the ''href" 
attribute to determine the page the link points to. 


Behind 
ike Scenes 
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going further with hypertext 


Understanding attributes 


Attributes give you a way to specify additional information about 
an element. While we haven’t looked at attributes in detail, you’ve 

already seen a few examples of them: r . . . • » 

TKc -type styl 

v/cVc usm% m 七 Wis Use CSS ， 




<style type="text/css"> ^___Th C W-f attribuic iclls us ihc desh^hoy, o( a hyp^lmk. 
<a href= n irule.html"> 

<img src=" sweetphoto • gif^> 」 the ^^ eha,,,, c of 


Let’s cook up an example to give you an even better feel for how 
attributes work: 


What if <car> were an element? 


If <car> were an element, then you’d naturally want to write some 
markup like this: ^ attnbutes, all .e da, su PP ly 

<car>My Red Mini</car> " 1S a aesdr. P t.ve r,amc U the 

But this <car> element only gives a descriptive name for your 
car — it doesn’t tell us the make, precise model, whether it is a 
convertible, or a zillion other details we might want to know. So, if 
<car> were really an element, we might use attributes like this: 

<car make= n Mini n model="Cooper n convertible= n no n >My Red Mini</car> 

Better, right? Now this markup tells us a lot more information in 
an easy-to-write, convenient form. 



Bu 七 v/rth 乙扣 

£.US*tom'lZjC "tiiC clcmOr>*t 
all k'mds <^P *m-Povma*tior>. 


Attributes are always written the 
same way: first comes the attribute 
name, followed by an equals sign, and then the 
attribute value surrounded in double quotes. 



You may see some sloppy HTML on the Web 
that leaves off the double quotes, but don’t get 
lazy yourself. Being sloppy can cause you a lot 
of problems down the road (as we’ll see later in 
the book). 


Po this (best practice) 



^uo-tc 


Not this 

<a href=toplO.html>Great Movies</a> 

No double quotes a\rouhd -the aUv-ibu-tc vdlue 


you are here ► 


51 







attributes and elements 



Dumb Qu©sti9ns 

Can I just make up new attributes for an HTML 
element? 

Web browsers only know about a predefined set of 
attributes for each element. If you just made up attributes, 
then browsers wouldn’t know what to do with them, and as 
you’ll see later in the book, doing this will very likely get you 
into trouble. When a browser recognizes an element or an 
attribute, we like to say that it “supports” that element or 
attribute. You should only use attributes that you know are 
supported. 

That said, for programming web applications (the subject 
of Head First HTML5 Programming), HTML5 now supports 
custom data attributes that allow you to make up custom 
names for new attributes. 

Who decides what is “supported ”？ 

There are standards committees that worry about the 
elements and attributes of HTML. These committees are made 
up of people with nothing better to do who generously give 
their time and energy to make sure there’s a common HTML 
roadmap that all organizations can use to implement their 
browsers. 

How do I know what attributes and elements 
are supported? Or can all attributes be applied to any 
element? 

Only certain attributes can be used with a given 
element. Think about it this way: you wouldn’t use an attribute 
“convertible” with the element <toaster>, would you? So, you 
only want to use attributes that make sense and are supported 
by the element. 

You’re going to be learning which attributes are supported by 
which elements as you make your way through the book. After 
you’ve finished the book, there are lots of great references 
you can use to refresh your memory, such as HTML & XHTML: 
The Definitive Guide (O'Reilly). 
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going further with hypertext 



Atoikuies 

This week’s interview: 

Confessions of the href attribute 


Head First： Welcome, href. It’s certainly a pleasure to interview as big an attribute 
as you. 

href： Thanks. It’s good to be here and get away from all the linking; it can wear an 
attribute out. Every time someone clicks on a link, guess who gets to tell the browser 
where to go next? That would be me. 


Head First： We’re glad you could work us into your busy schedule. Why don’t you 
take us back to the beginning.. .What does it mean to be an attribute? 

href： Sure. Well, attributes are used to customize an element. It’s easy to wrap some 
<a> tags around a piece of content, like “Sign up now!” 一 we do it like this: <a>Sign 
up now!</a> — but without me, the href attribute, you have no way to tell the <a> 
element the destination of the link. 

Head First: Got it so far... 

href： .. .but with an attribute you can provide additional information about the 
element. In my case, that’s where the link points to: 

<a href = M signup. html">Sign up now ! </a>. This says that the <a> element, 
which is labeled “Sign up now!”，links to the “signup.html” page. Now, there are lots 
of other attributes in the world, but I’m the one you use with the <a> element to tell it 
where it points to. 

Head First： Nice. Now, I have to ask, and I hope you aren’t offended, but what is 
with the name? href? What’s with that? 

href： It’s an old Internet family name. It means “hypertext reference，” but all my 
friends just call me “href” for short. 

Head First: Which is? 

href： A hypertext reference is just another name for a resource that is on the Internet 
or your computer. Usually the resource is a web page, but I can also point to PDF 
documents...all kinds of things. 

Head First： Interesting. All our readers have seen so far are links to their own pages; 
how do we link to other pages and resources on the Web? 


href： Hey, I gotta get back to work, the whole Web is getting gunked up without me. 
Besides, isn’t it your job to teach them this stuff? 

Head First： Okay, okay, yes, we’re getting to that in a bit.. .thanks for joining us, href. 
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linking back to the main page 


P^t 

ElUIRClSCf 


You've created links to go from “lounge.htmrto “elixir.html” and "directions.html"; now we're 
going to go back the other way. Below you’ll find the HTML for “elixir.html”. Add a link with the 
label “Back to the Lounge” at the bottom of the elixir page that points back to lounge.html". 


<html> 

<head> 

<title>Head First Lounge Elixirs</title> 

</head> 

<body> 

<hl>Our Elixirs</hl> 


<h2>Green Tea Cooler</h2> 

<p> 

<img src="green.jpg"> 

Chock full of vitamins and minerals, this elixir 
combines the healthful benefits of green tea with 
a twist of chamomile blossoms and ginger root. 

</p> 

<h2>Raspberry Ice Concentration</h2> 

<p> 

<img src="lightblue.jpg M > 

Combining raspberry juice with lemon grass, 
citrus peel and rosehips, this icy drink 
will make your mind feel clear and crisp. 

</p> 

<h2>Blueberry Bliss Elixir</h2> 

<p> 

<img src= n blue.jpg n > 

Blueberries and cherry essence mixed into a base 
of elderflower herb tea will put you in a relaxed 
state of bliss in no time. 

</p> 

<h2>Cranberry Antioxidant Blast</h2> 

<p> 

<img src= n red.jpg M > 

Wake up to the flavors of cranberry and hibiscus 
in this vitamin C rich elixir. 

</p> 





</body> 

</html> 
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When you are done, go ahead and do the same with "directions. htmr as well. 






going further with hypertext 



We need some help constructing and deconstructing <a> elements. Given your new 
knowledge of the <a> element, we’re hoping you can help. In each row below, you'll find some 
combination of the label, destination, and the complete <a> element. Fill in any information 
that is missing. The first row is done for you. 


Label Destination What you write in HTML 


tto 七。 r Ko*t? 

ho 七 

<a href="hot.html">Hot or Not?</a> 

Resume 

cv. html 



candy•html 

<a href=" M >Eye Candv</a> 

See my mini 

mini-cooper.html 


let's play 


<a href= M millionaire.html M > </a> 


theretare no o 

Dumb Questions 


I’ve seen many pages where I can click on an image rather 
than text. Can I use the <a> element for that? 

Yes, if you put an <img> element between the <a> tags, then 
your image will be clickable just like text. We're not going to talk 
about images in depth for a few chapters, but they work just fine as 
links. 


So I can put anything between the <a> tags and it will be 
clickable? Like, say, a paragraph? 

You can indeed put a <p> element inside an <a> element to 
link an entire paragraph. You’ll mostly be using text and images (or 
both) within the <a> element, but if you need to link a <p> or a <h1 > 
element, you can. What tags will go inside other tags is a whole other 
topic, but don’t worry; we’ll get there soon enough. 


you are here ► 


55 















organizing your site with folders 


Your work on the Head 
Rrst Lounge has really paid 
off. With those enticing elixirs and directions, 
lots of people are frequenting the place and 
visiting the website. Now weve got plans for 
expanding the lounges online content in all 
sorts of directions. 


fretting organized 



Before you start creating more HTML pages, it’s time to get 
things organized. So far, we’ve been putting all our files and 
images in one folder. You’ll find that even for modestly sized 
websites, things are much more manageable if you organize your 
web pages, graphics, and other resources into a set of folders. 


Here’s what we’ve got now: 


<html> 

: </html> 


ouv Wes h 、 


lounge.html 



lounge 


elixir.html 



This is *to as \ooV -foldcv- 

•the si*tc, i*t is the *bop-lcvcl -foldcv 

that d 。 灼 tarns c^*tiv*c si*tc- 


directions.html 


hcv-c are all -the images. See, -this is 
yttmg sov-ta duttc\rcd alv-cady, Br\d v/c cmly 
have -tWcc pays a -few yaphids. Lets 
do something abou*t it— 



jlooTt^ 

OOIOIOI 

|iojomJ 


loot 
inoiooi^ 
OOl 01 of ... 

ioioiii) 


drinks.gif 


green.jpg 




ttcv-c av-c the 
七 Wcc ttT/l/IL 

-files ： -fo\r *thc 

•the 

cli^iv-s page, 
by\A 

di\rc^*tio^s. 


..I loot 
liiioiool 
\ooioio\ 
lioioiljj 

blue.jpg 

|IOOl 

liiioiool 

0010101 

\\0\0\\\J 

lightblue.jpg 
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going further with hypertext 


Organizing the lounge 


Let’s give the lounge site some meaningful organization now. 
Keep in mind there are lots of ways to organize any site; we’re 
going to start simple and create a couple of folders for pages. 
We’ll also group all those images into one place. 


/ Wdcv- 




I^VcVc gomg -to leave the 
Wm u louhgc.htm| w paae m 

the w lou ， 9 e w 4ld 饮 


lounge 

• 






directions.html 


elixir.html 


Let's 9 -folder -to 

Wd pages about ihc Uh 3 c, 
like the d'urc^-tiohs. Wc 
亡 ould also add i^ew 
ke about the mahagcmchi 

Cwts, dK>d SO Oh. 


Well also dvca*tc b -Poldcv* b> hold 
pajes about 七 he loupe’s bevevajes. 
Rijh*t y\o>N "that’s jusi *thc cli^ivs, but 
>wc II be dddi)^ moire soor>- 


Ad let’s yro^ 
all ways 

OY\t -foldcv- 


drinks.gif ^ 

IIOI 
jooioi 
iloioiL, 

red.jpg 


loot 
\W0\0(\ 
0010/01 
I oi oi I J 

blue.jpg 


iooi 

IIIOIOC 

OOIOIO 

ioioiii 


lightblue.jpg 


Since you have a folder for images, 
why not have another one called "html” 
and put all the HTML in that folder? 

You could. There aren’t any “correct” 
ways to organize your files; rather, you 
want to organize them in a way that works 
best for you and your users. As with most 
design decisions, you want to choose an 
organization scheme that is flexible enough 
to grow, while keeping things as simple as 
you can. 



Or why not put an images folder 
in each other folder, like "about” and 
“beverages ”？ 

Again, we could have. We expect that 
some of the images will be reused among 
several pages, so we put images in a folder 
at the root (the top level) to keep them all 
together. If you have a site that needs lots 
of images in different parts of the site, you 
might want each branch to have its own 
image folder. 


"Each branch"? 

You can understand the way folders 
are described by looking at 
them as upside down 
trees. At the top is 
the root and each 
path down to a file 
or folder is a branch. 
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reorganizing and broken links 




E 站 Rc 版 


Now you need to create the file and folder structure shown on the previous page. Here’s 
exactly what you need to do: 


O Locate your “lounge” folder and create three new subfolders 
named “about” ， “beverages”, and “images”. 

O Move the file "directions.htmr , into the “about” folder. 

O Move the file “elixir.html”into the “beverages” folder. 

O Move all the images into the “images” folder. 

O Finally, load your “lounge.html”file and try out the links. 



It looks like we’ve got a few problems 
with the lounge page after moving 
things around. 




tlitk oy\ w eli%i\rs”（ov u dc*tailcd 


And, ⑼ you ⑶ CK on Ciwrs W 

divcdiohsO 七 Wmy y 七 y/ovsde y 七 a 的 

sayrn^ 七 k car!i be 心 ) u”d. 


cv-vov- 


Sorwc b\rov/scv-s display 
七 his cv-v-o\r as a v/eb page ^ 
v-aihev- a dialoa box .) 
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going further with hypertext 



Right. We need to tell the 
browser the new location 
of the pages. 

So far you’ve used href values that 
point to pages in the same folder. Sites 
are usually a little more complicated, 
though, and you need to be able to 
point to pages that are in otherfolders. 

To do that, you trace the path from 
your page to the destination file. That 
might mean going down a folder or two, 
or up a folder or two, but either way we 
end up with a relative path that we can 
put in the href. 
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working with paths 


Planning your paths. 


What do you do when you’re planning that vacation 

in the family truckster? You get out a map and _ u 

start at your current location, and then trace a path 6(oo^t Maps, 

to the destination. The directions themselves are W 七 >wovk 


OkaY ， youd 
v-callY y> *to 


relative to your location — if you were in another city, 
they’d be different directions, right? 


us 


To figure out a relative path for your links, it’s the 
same deal: you start from the page that has the link, 
and then you trace a path through your folders until 
you find the file you need to point to. 


Thcirc airc othcir kihds Jc 
ioo. Wt\\ get io 
"those ih btev dhdp-tcvs. 


Let’s work through a couple of relative paths (and 
fix the lounge at the same time). 



Linking down into a subfolder 


① 


Linking from 、、 lounge.html” to ''elixir.html M . 


We need to fix the “elixirs” link in the “lounge.html” page. Here’s what the 
<a> element looks like now: 


<a 



href= n elixir•html n >elixirs</a> 


RiaK*t ^ y/cVc just usm^ 

Ale 一 c y/WA 七 clU 

七 he kv-oy/sev- *bo look *tV^c 
-folder as w lou%c.WUr. 


② Identify the source and the destination. 

When we reorganized the lounge, we left “lounge.html” in the “lounge” folder, and 
we put “elixir.html” in the “beverages” folder, which is a subfolder of “lounge”. 



IIOOI 

• looiotJI 

llQIQlljJ 
drinks.gif - 


iiooi 

\ooioio\ I iooi u 

liQioiijJ hnoioci 

green.jpg looioiol 
\\0\0Wi3 

blue.jpg 


麵 

loZj 

r'Jdj^g lightblue.jpg 
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going further with hypertext 


③ Trace a path from the source to the destination. 

Let’s trace the path. To get from the “lounge.html” file to “elixir.html”，we need to go 
into the “beverages” folder first, and then we’ll find “elixir.html” in that folder. 


weed *to 
w bcvcv-ays ， Wdcv-. 



div-c^-tly \v\ -that -Poldev-. 



④ Create an href to represent the path we traced. 

Now that we know the path, we need to get it into a format the browser 
understands. Here’s how you write the path: 


Scpav-a*tc all pav-ts o-f 
Fivst, v/c 50 m*bo 七 he ihc paih v/iih a V' 

bcvcv-ays -foldcv-. 

\l 

beverages / elixir.html 


Finally, wc have the 



rihdiiy, ， 
TilcharnC 


Putting i-fc all "toythd 




<a href = lf beverages/elixir. html If >elixirs</a> 
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a little practice with paths 


parpen your penci 


Your turn: trace the relative path from lounge.html" to "directions.html". When you’ve 
discovered it, complete the <a> element below. Check your answer in the back of the 
chapter, and then go ahead and change both <a> elements in “lounge.html.” 



\OOl 

moiocA 

ooioiol 

ioioiiiJ 


1001 

liloiool 


blue.jpg 


llloioa 

OOIOIO 

IOIOIII 


drinks.gif 


\\\o\oA ,l,0,0 4 

00l0,0 \ 

■oYoiiJ !£i3> 

r^g 


<a href=" 

youR AM 獻 _ 




’’>detailed directions</a> 
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going further with hypertext 


Going the other way; linking up into a M parent” folder 


① Linking from ''directions.html" to w lounge.html〃. 

Now we need to fix those “Back to the Lounge” links. Here’s what the <a> 
element looks like in the “directions.html” file: 


<a href = n lounge .html If >Back to the Lounge</a> 


y\o>w, jus 七 

*tclU 

七 he kv-ov/scv- *bo look m 
i\\t sa^e -foldcv- as , 
w div*cC.*t»oy\S.K"tw'l - Tha 七 s 
y\ 0 *t *to v/ovk. 


② Identify the source and the destination. 

Let’s take a look at the 
source and destination. 

The source is now 
the “directions.html” 
file, which is down in 
the “about” folder. The 
destination is the 
“lounge.html” file that sits 
above the “about” folder, 
where “directions.html” 
is located. 



..av\A “da 
pa 七 h *to V^cvc- 


images 



IIOOI 

OOIOIOV 

[joionj 

green.jpg 


IOOI 

\uo\oA 

ooioiol 

IQIQIIjJ 

blue.jpg 




drinks.gif j^i 

\ooiou 
llOIOIIli 

n 9 htblue -jP 9 


1001 
moioc 
ooioiol 
ioioiiiJ 


Trace a path from the source to the destination. 

Let’s trace the path. 

To get from the 
directions.html” file to 
lounge.html”，we need to 
go up one folder into the 
lounge’’ folder, and then 
we’ll find “lounge.html” 
in that folder. 


U 


U 





W |ouy>y.lvt 你 | W is 

div-cd-tly m -that -Poldev-. 



images 


灼 ccd 

UP lyrto 七 k 

w louy\^c 


lliioiool 
looioifll 
IjoiomJ 

drinks.gif 


IIOOJ ^ 
lliioiool 
looioiol 
IjoioinJ 
greenjpg 



blue.jpg 


歐屬 


red .jpg 


lightblue.jpg 


you are here ► 


63 













































building the href 


④ Create an href to represent the path we traced. 

We’re almost there. Now that you know the path, you need to get it 
into a format the browser understands. Let’s work through this: 


— T 二义工 

U P OTit w )> 

do a o S 


Scpav-atc all pav-b o( 
the path with a u / w - 




V- 



Finally, you have -the 

-Pi I Charge. 


*m a SC6- 



/ lounge.html 


Pvor>ouMe w . ” as w do*t do*t W . 


Puttihg i-fc dll "togethev-. 




<a href= n . ./lounge .html 11 >Back to the Lounge</a> 



Now whch you d\C\c Oh -the lihk, -the 
kowsc\r will look 4v- the U |ouhftC.hlm| W 
file m the -Poldcv- above. 
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going further with hypertext 


tJiereiare no ^ 

Dumb Questi9ns 


What’s a parent folder? If I have a 
folder “apples” inside a folder “fruit”，is 
“fruit” the parent of “apples ”？ 

Exactly. Folders (you might have heard 
these called directories) are often described 
in terms of family relationships. For instance, 
using your example, “fruit” is the parent of 
“apples”, and “apples” is the child of “fruit”. 

If you had another folder “pears” that was 
a child of “fruit”，it would be a sibling of 
“apples.” Just think of a family tree. 

Okay, parent makes sense, but 
what is 

When you need to tell the browser that 
the file you’re linking to is in the parent folder, 
you use to mean “move UP to the parent 
folder.” In other words, it’s browser-speak 
for parent. 

In our example, we wanted to link from 
"directions.html", which is in the “about” folder, 
to “lounge.html”, which is in the “lounge” 
folder, the parent of “about”. So we had to 
tell the browser to look UP one folder, and 
is the way we tell the browser to go UP. 


What do you do if you need to go 
up two folders instead of just one? 

You can use for each parent folder 
you want to go up. Each time you use 
you’re going up by one parent folder. So, if 
you want to go up two folders, you’d type 
You still have to separate each part with 
the T, so don’t forget to do that (the browser 
won’t know what “■…” means!). 

Once I’m up two folders, how do I 
tell the browser where to find the file? 

You combine the with the 
filename. So, if you’re linking to a file called 
“fruit.html” in a folder that’s two folders up, 
you’d write “■■/■■/fruit.html”. You might expect 
that we’d call the “grandparent” folder, 
but we don’t usually talk about them that way, 
and instead say, “the parent of the parent 
folder,” or for short. 

Is there a limit to how far up I can 
go? 

You can go up until you’re at the root 
of your website. In our example, the root was 
the “lounge” folder. So, you could only go up 
as far as “lounge”. 


Q/ What about in the other direction— 
is there a limit to how many folders I can 
go down? 

Well, you can only go down as many 
folders as you have created. If you create 
folders that are 10 deep, then you can write 
a path that takes you down 10 folders. But 
we don’t recommend that—when you have 
that many folder levels, it probably means 
your website organization is too complicated! 

In addition, some browsers impose a limit 
on the number of characters you can have 
in a path. The spec advises caution above 
255 characters, although modern browsers 
support longer lengths. If you have a large 
site, however, it’s something to be aware of. 

My operating system uses T as 
a separator; shouldn’t I be using that 
instead of T? 

No; in web pages you always use T 
(forward slash). Don’t use T (backslash). 
Various operating systems use different file 
separators (for instance, Windows uses “\” 
instead of T) but when it comes to the Web, 
we pick a common separator and all stick to 
it. So, whether you're using Mac, Windows, 
Linux, or something else, always use T in 
the paths in your HTML. 


Your turn: trace the relative path from “elixir.html” to “lounge.html” from the “Back to the 
Lounge” link. How does it differ from the same link in the “directions.html” file? 

-Quies eqi X/pexa s/ n !iuseop :jqmsu\/ 
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relative paths and images 


Fixing those broken images... 

You’ve almost got the lounge back in working order; all you 
need to do now is fix those images that aren’t displaying. 

We haven’t looked at the <img> element in detail yet (we will 
in a couple of chapters), but all you need to know for now is 
that the <img> element’s src attribute takes a relative path, 
just like the href attribute. 

Here’s the image element from the “lounge.html” file: 

<img src= ff drinks . gif "> 



IWs 七 he \rdativc pa 仏 whidh id Is -the 
b\rowsc\r v/hc\rc ihc image is located- iVc 
spcdi-Py -this jus-t like v/c do v/iih ihc hvc-P 
attribute 七 he <a> 


Hey, ifs nice you fixed all 
those links, but didn’t you forget 
something? All our images are broken! 
Don’t leave us hanging—weve got a 
business to run. 


o 



Finding the path from "louHge-htwl" to "drinks.gif" 



So when we put (1) and (2) together, our path looks like “images/drinks.gif” ， or: 

<img src= ff images/drinks . gif T! > 
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going further with hypertext 


Finding the path from "elixir.htwl" to "red.jpg" 

The elixirs page contains images of several drinks: “red.jpg ”， 
“green.jpg” ， “blue.jpg”，and so on. Let’s figure out the path to 
“red.jpg” and then the rest will have a similar path because they 
are all in the same folder: 



So putting (1) , (2)，and (3) together, we get: 

Dovm m*to 

U ? V’ m bcWcL — “ im ， s ” 


V" ih bc-twi 


CCh 


p 


av-cr\*b -foldcv- 


-foldc 


\r 


V 



images 






red.jpg 



<img src= f! . . /images/red. jpg ff > 
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fixing images with relative links 



That covers all the links we broke when we reorganized the lounge, although you still need to 
fix the images in your “lounge.html” and “elixir.html” files. Here’s exactly what you need to do: 


O In “lounge.html”，update the image src attribute 
to have the value “images/drinks.gif ■ 

O In “elixir.html”，update the image src attribute so 
that "../images/" comes before each image name. 

O Save both files and load “lounge.htmrin your 
browser. You'll now be able to navigate between 
all the pages and view the images. 



P.S. If you're having any trouble, the folder 
“chapter2/completelounge” contains a working version of 
the lounge. Double-check your work against it. 







M 


Welcome to the New and improved 
Ilead First Lounge 



at# JU 

Ymi f 

Directions 


I cfcvJX ocofcrtkyi md naybv • pm 
. WixIcK* tmmi» prj»«kc. 


Yout teiu» rtdxiBikt c<siorc^6o«Tn>«D Uro» dooJ beb 

CrnCt^ •o.itctkomau icalioJ Cookib! 



fine 

», 和 C ■众. <r.. 


Directions 



. ^#i»i ••• 

Our Klixin 

CnMlcaCMter 



ItMpfcirr; kt rH— 


Tate (be M) S exit io W«bvflk • |p9 04 mi 

Cvumur gn SU - gp 12 mi 

Tara n^biai Scrucnav Ave N • go 0.6 mi 

T«n> «ad head inwaid Sktartuiv Ayr S - gnOjCI m 

Tara n(M«i Scrucnvc Ave N • go 0.7 mt 

CtmtmMou Stnetut 8 . foO. 2 rra 

Tara at SW Pictmmcm v»ay foOJORi 






You did it! Now 
we’ve got organization and 
all our links are working. Time 
to celebrate. Join us and have a 
green tea cooler. 
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going further with hypertext 


^^BUILET POINTS —— 

■ When you want to link from one page 
to another, use the <a> element. 

■ The href attribute of the <a> element 
specifies the destination of the link. 

■ The content of the <a> element is the 
label for the link. The label is what 
you see on the web page. By default, 
it’s underlined to indicate you can 
click on it. 

■ You can use words or an image as 
the label for a link. 

■ When you click on a link, the browser 
loads the web page that’s specified 

in the href attribute. 

■ You can link to files in the same 
folder, or files in other folders. 

■ A relative path is a link that points to 
other files on your website relative 
to the web page you’re linking from. 
Just like on a map, the destination is 
relative to the starting point. 


■ Use “"” to link to a file that’s one 
folder above the file you’re linking 
from. 

■ means “parent folder.” 

■ Remember to separate the parts of 
your path with the T (forward slash) 
character. 

■ When your path to an image is 
incorrect, you'll see a broken image 
on your web page. 

■ Don’t use spaces in the names you 
choose for files and folders for your 
website. 

■ It’s a good idea to organize your 
website files early on in the process 
of building your site, so you don’t 
have to change a bunch of paths 
later when the website grows. 

■ There are many ways to organize a 
website; how you do it is up to you. 
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practicing paths 



The Relativity Grand Challenge 


Here’s your chance to put your relativity skills to the test. We’ve got a website for 
the top 100 albums in a folder named “music”. In this folder you’ll find HTML files, 
other folders, and images. Your challenge is to find the relative paths we need so 
we can link from our web pages to other web pages and files. 

On this page, you'll see the website structure; on the next page, you’ll find the 
tasks to test your skills. For each source file and destination file, it's your job 
to make the correct relative path. If you succeed, you will truly be champion of 
relative paths. 


Good luck! 





genres.html 


1001 

moiocA 

OOI0101 

ipioijjj 

logo.gif 



rock 


pinkfloyd.html 

\ 


</html> 



coldplay.html 


xandy.gif 


1001 

IliOlOOl 

ooioiol 

1010" J 


floyd.gif 


1001 
llloioai 
001 oi ol 

101011J 

chris.gif 
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going further with hypertext 


It's time for the competition to begin. 
Ready...sct...write! 


EvanPL^ 





top100.html 


Ko^np On 彡 



top100.html 


Two 



genres.html 





top100.html 




coldplay.html 




genres.html 


1001 

uioiool 

ooioioi 

ipioinj 

logo.gif 


1001 f^j 
\no\o(\ 
ooioioi 

101011J 

logo.gif 




<html> 


'St 说 


Wdcv*, so ^ 

^ ao Ao^ 


V^ddi 


pinkfloyd.html 


1001 

luoiocj 

ooioioi 

lololllj 

chris.gif 
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some fun for your left brain 



HTMLcposs 

How does a crossword help you learn HTML? Well, all the words are HTML- 
related and from this chapter. In addition, the clues provide the mental twist and 
turns that will help you burn alternative routes to HTML right into your brain! 


1 2 


4 





5 


6 




7 






8 











9 









10 



11 




12 








13 

14 


15 

































16 













17 







Across 

1. “../myfiles/index.html”is this kind of link. 

3. Another name for a folder. 

6. Flavor of blue drink. 

9. What href stands for. 

13. Everything between the <a> and </a> is this. 

16. Can go in an <a> element, just like text. 

17. Pronounced 


Down 

2. href and src are two of these. 

4. Hardest-working attribute on the Web 

5. Rhymes with href. 

7. Top folder of your site. 

8. The “HT” in HTML. 

10. Healthy drink. 

11. A folder at the same level. 

12. Use __ to reach this kind of directory. 

14. Text between the <a> tags acts as a 

15. A subfolder is also called this. 
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going further with hypertext 



You needed to add a link with the label “Back to the Lounge” at the bottom of the elixir page that 
points back to "lounge.html". Here’s our solution. 


每热 C 伽 

§PLuiioH 


<html> 

<head> 

<title>Head First Lounge Elixirs</title> 
</head> 

<body> 

<hl>Our Elixirs</hl> 

<h2>Green Tea Cooler</h2> 

<P> 

<img src="green.jpg n > 

Chock full of vitamins and mi 
combines the healthful benefi 
a twist of chamomile blossoms 

</p> 

<h2>Raspberry Ice Concentration</h2> 

<P> 

<img src="lightblue.jpg n > 
Combining raspberry juice wit 
citrus peel and rosehips, thi 
will make your mind feel clea 

</p> 

<h2>Blueberry Bliss Elixir</h2> 

<P> 

<img src="blue.jpg"> 


0 O O 

d ： 


@iTi 


Head First Lounge Elixirs 


file:///chapter2/lounge/elixir.html 


O 


Our Elixirs 


Green Tea Cooler 




v Chock full of vitamins and minerals, this elixir combines the healthful benefits of 
green tea with a twist of chamomile blossoms and ginger root. 


Raspberry Ice Concentration 


Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy 
drink will make your mind feel clear and crisp. 

Blueberry Bliss Elixir 


f 


— Blueberries and cherry essence mixed into a base of cldcrflowcr herb tea will put 
you in a relaxed state of bliss in no time. 

Cranberry Antioxidant Blast 


Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir. 
Back to the Lounge 



A 


Blueberries and cherry essence mixed into a 
of elderflower herb tea will put you in a 
state of bliss in no time. 

</p> 

<h2>Cranberry Antioxidant Blast</h2> 

<p> 

<img src= n red.jpg n > 

Wake up to the flavors of cranberry and hibiscus 
in this vitamin C rich elixir. 


</p> 

<P> 

<a href= n lounge.html M >Back to the Lounge</a> 
</p> 

</body> __ _ Wc Imk msidc i*ts ovjy\ pa\raj\raph 

</html> *fco keep -thmjs tidy- IVfcll talk move 

about *this m dhap*tc\r. 


Hcvcs i\st ^ <a> 

batk -bo 哼 . 
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exercise solutions 



Exercise solutions 


Label Destination 



ftoi o\r 


<a href="hot.html M >Hot or Not?</a> 

Resume 

cv • html 

O — W dV.li-tr»»| W >Rcsur»»C</3> 

Eye Ca^dy 

candy.html 

<a href=" … M >Eye Candv</a> 

See my mini 

mini-cooper.html 

<a 二 'Wmi — doo^r h*tml’’>See my a> 

let's play 

rwillionaivelvW 

<a href = M millionaire.html"> lets play </a> 
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going further with hypertext 


%iharpen your pencil 

Solution 


Trace the relative path from "lounge.html" to "directions.html". When you’ve 
discovered it, complete the <a> element below. 

Here’s the solution. Did you change both <a> elements in “lounge.html ”？ 




jTooTt^ 

lmoiool 

looioiol 

lioioinj 


drinks.gif 


liiioiool 

looioiol 

[ipioinj 


1001 
\\\o\odi 

gree.n.jpg a ooiouA 

iQlOlJjJ 

blue.jpg 


I.oVoiiJ 

rldj^g 叫咖 6 ^ 


<a href= n abou*t/di\red*tions.irtw\| n >detailed directions</a> 
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exercise solutions 



The Relativity Grand Challenge Solution 


On 彡 



imajcs/lojo^i-f 


top100.html 


^ 丄 Wdcv, so 

_^ moiocA 
""^ oo\o\(k 
loiouj 


logo.gif 


<y> dow 


ways 


Wdcv. 


Ko^np Two 






genres.html 


tool b| 
llloioai 
ooi oi of 

101011 ij 

logo.gif 


Ko^np X}\w 


广 


. <h :: ^ jc^vcs/ yocW p'mk-floyd h'tw'l :: ^ 

■ 


yv\V-CS.V\-twl »s do>wv\ m 
i\it so 

-to yt -to >wc 

Avs 七 V^d -to uf -to 

_ 仏， and 七 b do^ *rnt> 
be ways ^oldcv-. 


^ - 


top100.html 


pinkfloyd.html 


pON^S Ko^NP 


广 



coldplay.html 


../../imaacs/a\rtis*ts/^Wis.ai-f loo/ 

___ t! 觚 liloiod 

* ooi oi of 
loionjj 

chris.gif 


TVo/as a *br 匕 lo/ cmc. 

tol 却 la7 n V/WW.S do^ rn 

七 V^e v-otk -foldcv-, >wc Kad *to 50 

外 TWO -folder bo yi b> —« 
ayvd 3° dovm >山 ^ a 3 cs, 
a^d -f mally art ， 七 , *to ttc 

imd^e tWis y-f. V^c>w! 
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3 building blocks 





Web Page Construction 



I was told I’d actually be creating web pages in this book? 

You’ve certainly learned a lot already: tags, elements, links, paths...but it’s all for 
nothing if you don’t create some killer web pages with that knowledge. In this chapter 
we’re going to ramp up construction: you’re going to take a web page from conception 
to blueprint, pour the foundation, build it, and even put on some finishing touches. All 
you need is your hard hat and your toolbelt, as well be adding some new tools and 
giving you some insider knowledge that would make Tim “The Toolma 门 ” Taylor proud. 


this is a new chapter 77 





meet tony and his segway 



r 

丁叫、 


Tov^y s 


1 


巧 ㈣ —枷 ws 




JuVf A s\^wS orv ^ S '^ C 




a»\d \ 




輝 s 兹 

^vjaN.' 


f c —c \ 此二 r 工 r 二. 

口％ a ，^V ⑽ 

s i ^ gtrn 


,i \%00 ^ cs a 'l^a p\atcs ovx 

猶 



Make s^c yo, read To^s adv ⑼ Wes -七 

V)dr\dy *t^v-ou^ou*t *tV^C tV>3f"tcv*. 


totist iy\ 
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building blocks 


From journal to website, at \1 mph 。 \ 

Tony’s got his hands full driving across the United States on his Segway. 

Why don’t you give him a hand and create a web page for him? 

Here’s what you’re going to do: 

First, you’re going to create a rough sketch of the journal that is the basis for 
your page design. 

Next, you’ll use the basic building blocks of HTML (<hl>, <h2>, <h3>, <p>, and so on) 
to translate your sketch into an outline (or blueprint) for the HTML page. 

Once you have the outline, then you’re going to translate it into real HTML. 

Finally, with the basic page done, you’ll add some enhancements and meet 
some new HTML elements along the way. 


❶ 

O 

❺ 

❹ 


^^arpen your pencil 


Take a close look at Tony’s journal 
and think about how you’d present the 
same information in a web page. 

Draw a picture of that page on the right. 
No need to get too fancy; you’re just 
creating a rough sketch. Assume all his 
journal entries will be on one page. 

Things to think about: 

Think of the page in terms of large 
structural elements: headings, 
paragraphs, images, and so on. 


■ 


■ 


Are there ways his journal might be 
changed to be more appropriate for 
the Web? 


STOP! Do lids exercise before turning the pa^e. 


>uv skc*t^K 
^ocs Kcvc- 
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making a rough sketch 


The rough design sketch 


Tony’s journal looks a lot like a web page; all we need to do to 
create the design sketch is to get all his entries on one page and 
map out the general organization. It looks like, for each day 
that Tony creates an entry, he has a date heading, an optional 
picture, and a description of what happened that day. Let’s 
look at the sketch... 

ttc also his jouv^al a 
dcsd\riftio^. Well daptuve 
-that hcv-c as a small 
fav-ayaph a*t *top. 

Bsch day ； Tony dv-catcs ar\ e^bry that 
•mdudes the date, usually a pidtuv-c, 
a dcsd\rip*bio^ of the day’s advcir\*tuv-cs. 

So, *tha*t’s d By\ 

a^o*tKcv- pav-ayaph o( 


Sonr»ctinr»cs he does / 七 mdlude a pidiuve. |r> ihis 
chi\ry, he jus-t has a heading (the date) av\d a 
dcstvipiio^ o( -the day’s events. 




The *tii*ivd Cr>*tv*y should look jus 七 

like "tiic -f iv"s*t oy \ c ： 3 huda 於 

dr>d a fav-ayapii- 


oaac. H-.S Was a,a ^ car, >st use 
IcxoW ba^r bo 办 oil K»s t^brxts... 

f 二二 tu 


哪 

\s/^cv*c usevs t3y\ see 


从 Cm Without s^ollm^. 


S gave his iou\rhal a -title, 
ay h USj\, ), so Ict^s y-t -that 
叫 ht at the "top as a keadih 0 . 


Sc^way^ USA 

PodurnCK»"t*m^ my "tvi^ dV^OUI^ci 七 “e US OY\ 
my vevy ovm Seaway/ 

August ZO, ZOlZ 


Well I made it I ZOO miles alv-eady ； a^d I passed 
■tKvou^K some mtev-cs-tm^ plddes or\ tKc y/ay ： 
l/Valla l/Valla, l/V/\, C'rty, ID, Bouirrti*Pul, 

UT, Las-t CKair>dc, CO, ^VKy, AZ- 3 ir>d Tv-u*tK or 

CoY\St<\^tY\tCS, NM- 

July l^ t ZOll 

I sdv/ some Buvma £Kavc style si^ns or» tKc side 
of tKc roBd today: u Passiir»^ dav*s, WKcrv you 
t^{. see, /Way 3d you, A glimpse, 0 -f etemity 广 
I dc-f mitcly y/em’t be pass'm^ any davs. 

June ZOlZ 


Aly -fivs-t day -tKc -tvip/ | da^t believe 
^mally 30 七 cvcv-y-tK'm^ padked and v-cady -to 50. 
Because oir> d Sc^y/ay, ( wasn't able *to bviir^ 
a y/Kolc lo*t v/i'th me ： dell pKoirve, iPod, di^'rbell 
dameva, and a pv-o-tem bav-. Just -tKc essentials. 
As Lao Tzju v/ould Kavc said, ''A jouv-ir>cy o( a 
■tliousairid miles be^'ms y/rth erne Seaway.’ 
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From a sketch to aw outline 

Now that you’ve got a sketch of the page, you can take 
each section and draw something that looks more like 
an outline or blueprint for the HTML page... 


ttcv-c v/c^vc takers eddh av-ca of 七 he 
skc-Uh ar\d Seated a dov-v-cspo^d'mj 

blodk m ouir bluepvnvt. 


All you need to do now is figure out which HTML 
element maps to each content area, and then you can 
start writing the HTML. 


EXERCISE: WEB CONSTRUCTION 

You’ve already figured out the major 
architectural areas of the page; now you just 
need to nail down the building materials. Use 
the elements below to label each area. You 
won't use them all, so don’t worry if you have 
some building materials left over. And don’t 
forget to wear your hard hat. 










































































turning the outline into a web page 


From the outline to a web page 

You’re almost there. You’ve created an outline of 
Tony’s web page. Now all you need to do is create 
the corresponding HTML to represent the page 
and fill in Tony’s text. 

Before you begin, remember that every web page 
needs to start with the <html> element and include 
the <head> and <body> elements. 


Now that you know 
what ''building blocks" make 
up each part of the page, you 
can translate this blueprint 
directly into HTML 


0 
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building blocks 




WcVc USI 


% the *ti*tlc o-f 七 he journal 

: o-f the web pa^c- 


as 










<html> 

<head> 

<title>My Trip Around the USA on a Segway</ title> 
</head> 

<body> 



㈣ 政 〆 


<hl>Segway'n USA</hl> 

<P> 

Documenting my trip around the US on my very own Segway! 


</p> 




〆. 、工 > 


<h2>August 20, 2012</h2> 

<img src="images/segway2.jpg M > 

<P> ^ 

Well 工 made it 1200 miles already, and 工 passed 
through some interesting places on the way : Walla Walla, 
WA, Magic City, ID, Bountiful, UT, Last Chance, CO, 

Why, AZ and Truth or Consequences, NM. 

</p> 



Hev*c’s Toy\Y ，s 州從七 
代 … 七 trkx^ 


J 


<h2>July 14, 2012</h2> 

<p> 

工 saw some Burma Shave style signs on the side of the 
road today : "Passing cars , When you can * t see. May get 
you, A glimpse. Of eternity ." 工 definitely won't be passing 
any cars. 

</p> 


his sttoY\d 

Cr>*tv*y> v/hidh doesn't 
have 



<h2>June 2, 2012</h2> 

<img src="images/segwayl.jpg M > 

<p> 

My first day of the trip ! 工 can 1 1 believe 工 finally got 
everything packed and ready to go. Because I'm on a Segway, 

工 wasn't able to bring a whole lot with me: cell phone, iPod, 
digital camera, and a protein bar. Just the essentials. As 
Lao Tzu would have said, "A journey of a thousand miles begins 
with one Segway." 

</p> 






</body> _ L^si, but ⑽七 Icasi, do〆 七 -Po\rjci "to 

</html> y ou ' r <body> a^d <hirwl> derwe^ts. 

ahead a^d -type this m. Save your file *to the w dhaftc^/jour^al w bolder as w joumaUW' You II -Pmd the “ays 
^sc^y/ayl a^d ^sc^wayZjfg' already m i\\t -Poldcv-. W\\cy\ youVc doY\t, -this fajc a tes-t drive. 
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test driving tony's page 


Test driving Towy's web page 




My Trip Around the USA on a Segway 


I 


+ |0file:///chapter3/journal/journal.html C Google 】 


Segway f n USA 

Documenting my trip around the US on my very own Segway! 

August 20, 2012 



Well I made it 1200 miles already, and I passed through some 
interesting places on the way: Walla Walla, WA, Magic City, ID, 
Bountiful, UT, Last Chance, CO, Why, AZ and Truth or 
Consequences, NM 

July 14, 2012 

I saw some Burma Shave style signs on the side of the road 
today: Passing cars, When you can't see, May get you, A glimpse, 
Of eternity. I definitely won't be passing any cars. 

June 2, 2012 



My first day of the trip! I can't believe I finally got everything 
packed and ready to go. Because I'm on a Segway, I wasn't able 
to bring a whole lot with me: cellphone, iPod, digital camera, and 
a protein bar. Just the essentials. As Lao Tzu would have said, 
"A journey of a thousand miles begins with one Segway." 



㈣ 






jas 

_Vi4-Wiv\(\ 
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building blocks 


Adding some new elements 

You have the basic elements of HTML down. You’ve gone from a hand¬ 
written journal to an online version in just a few steps using the basic 
HTML elements <p>, <hl>, <h2>, and <img>. 

Now we’re going to s-t-r-e-t-c-h your brain a little and add a few more 
common elements. Let’s take another look at Tony’s journal and see 
where we can spruce things up a bit … 


^ ^ My Trip Around the USA on a 

I ^ 1 I ■f fi>c，7//chjpicr3/>oufnjl/jcHirn4l.html 


CKctk out 


Segway’n USA 

I documenting my trip around the US on my very own 5iegway! 

August 20,2012 




My first day of the trip! I can't believe I finally got everything 
packed and ready to go. Because I'm on a Scgway, I wasn't able 
to bring a whole lot with me: cellphone, iPod, digital camera, 
and a protein bar. Just the essentials. As Lao Tzu would have 
said 


id I pa&bcd through some 
WalU, WA，Magic City ， ID, 
iy，AZ and Truth or 


on the side of the road 
»cc. May get you. A glimpse, 
ing any cars. 


t: To\r\V n ； 

stutk a 七七 ^ Chd d Wis ^Wsi post 

Kis vcv-s'io^ of a Lao Tzja yott- 

ouv-y\cy a *tKousay\d \>t^ 
ov\t Seaway.’ 


w A\o 

y/'itt 



Kas a little fte 
士 . Its 



My first day of the trip! 1 can't believe I finally got everything 
packed and ready to go. Because l.m on a Segway, I wasn't able 
to bring a whole lot with me: cellphone, iPod, digital camera, and 
a protein bar. Just the essentials. As Lao Tzu would have said, 
"A journey of a thousand miles begins with one Segway." 


HTML- has 扣 element (or just *tha*t k"md o( 
■th'mj. Lets -bake a look on -the fay … 
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quotes in your html 


Meet the <q> element 

Got a short quote in your HTML? The <q> element is just what 
you need. Here’s a little test HTML to show you how it works: 

<html> 

<head> 

<title>Quote Test Drive</ title> 

</head> 

<body> 

<P> 

You never know when you'11 need a good quote, how 

about <q>To be or not to be</q>, or <q>Wherever you go, there you are</q>. 

</p> 

</body> 

</html> 

surv-ou^a ^ a «\> taj a^d 

a</ V ta 3 . Uohu v/c dor, t 敵 ovm 

double - wte eMaracitrs aro^d ，七 es. 



^o*t *^uo*tcs "t-iiis HT/VJL •… 

^ V 


And test drive 

how ihc quotes look m the 
b\rowsc\r. Noiidc ihc b\rowsev has ^ov\C b> 
"the -trouble o( adding -the double ^uo-tes. 


0 0 0 

Quote Test Drive 



C 


+] 

10 file:///quote.html 

" Or Coogle 


You never know when you'll need a good quote, how about .'To be or not to be 11 , or 
"wherever you go, there you arc ,! . 




Not all browsers display 
double quotes around the 
content in the <q> element. 

This is unfortunate, because if 
you ddd your own double quotes, 
some browsers will display 
TWO sets of quotes. We advise testing <q> in 
different browsers to see the results that you get 


Watch it! 
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building blocks 


Wait a sec...you removed 
the double quotes and 
substituted a <q> element, which just 
displays double quotes? Am I supposed 
to be impressed? Are you trying to 
make things more complicated? 


No. We’re trying to make things 
more structured and meaningful. 


There are lots of reasons people use double quotes 
in text, but when we use <q>, that means something 
specific — it means the text of an actual quote (in Tony’s 
case, a “remixed” quote). ^_ 

In other words, what we’ve done is to add more 
meaning by marking up the quote. Before we added 
the <q> element, the browser just knew it had a 
paragraph of text with a few double-quote characters 
in it. Now, because we’re using the <q> element, the 
browser knows that some of that text is a real quote. 


See! Wsmg double 
quotes doesn't 
mdke 3r\ 

d^-tudl 


So what? Well, now that the browser knows this is a 
quote, it can display it in the best way possible. Some 
browsers will display double quotes around the text 
and some won’t; and in instances where browsers are 
using non-English languages, other methods might be 
used. And don’t forget mobile devices, like cell phones, 
or audio HTML browsers and screen readers for the 
visually impaired. It’s also useful in other situations, 
such as a search engine that scours the Web looking for 
web pages with quotes. Structure and meaning in your 
pages are Good Things. 


One of the best reasons (as you’ll see when we get back 
to presentation and CSS later in the book) is that you’ll 
be able to style quotes to look just the way you want. 
Suppose you want quoted text to be displayed in italics 
and colored gray? If you’ve used the <q> element to 
structure the quoted content in your web pages, you’ll 
be able to do just that. 
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adding a quote 


ExeRciSe 


Here’s Tony’s journal. Go ahead and rework his Lao Tzu quote to use the <q> 
element. After you’ve done it on paper, make the changes in your "journal.html" file 
and give it a test drive. You'll find the solution in the back of the chapter. 


<html> 

<head> 

<title>Segway'n USA</title> 

</head> 

<body> 

<hl>Segway'n USA</hl> 

<P> 

Documenting my trip around the US on my very own Segway! 

</p> 

<h2>August 20, 2012</h2> 

<img src="images/segway2.jpg n > 

<P> 

Well 工 made it 1200 miles already, and 工 passed 
through some interesting places on the way : Walla Walla, 

WA, Magic City, ID, Bountiful , UT, Last Chance, CO, 

Why, AZ and Truth or Consequences, NM. 

</p> 

<h2>July 14, 2012</h2> 

<P> 

工 saw some Burma Shave style signs on the side of the 
road today : "Passing cars. When you can't see , May get 
you, A glimpse. Of eternity ." 工 definitely won't be passing 
any cars. 

</p> 

<h2>June 2, 2012</h2> 

<img src="images/segwayl.jpg n > 

<p> 

My first day of the trip ! 工 can't believe 工 finally got 
everything packed and ready to go. Because I'm on a Segway, 

工 wasn't able to bring a whole lot with me: cell phone, iPod, 
digital camera, and a protein bar. Just the essentials. As 
Lao Tzu would have said, "A journey of a thousand miles begins 
with one Segway." 

</p> 

</body> 

</html> 
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The Case of the Elements Separated at Birth 


Identical twins were bom in Webville a number of years ago, and by 
a freak accident involving an Internet router malfunction, the twins 
were separated shortly after birth. Both grew up without knowledge 
of the other, and only through another set of freak circumstances did 
they later meet and discover their identity, which they decided to 
keep secret. 





After the discovery, they quickly learned that they shared a 
surprising number of things in common. Both were married 
to wives named Citation. They also both had a love for 
quotations. The first twin, the <q> element, loved short, pithy 
quotes, while the second, <blockquote>, loved longer quotes, 
often memorizing complete passages from books or poems. 


Being identical twins, they bore a strong resemblance to each other, 
and so they decided to put together an evil scheme whereby they 
might stand in for each other now and then. They first tested this on 
their wives (the details of which we won’t go into), and they passed 
with flying colors—their wives had no idea (or at least pretended not 
to). 


Next they wanted to test their switching scheme in the workplace 
where, as another coincidence, they both performed the same job: 
marking up quotes in HTML documents. So, on the chosen day, the 
brothers went to the other’s workplace fully confident they’d pull off 
their evil plan (after all, if their wives couldn’t tell, how could their 
bosses?), and that’s when things turned bad. Within 10 minutes of 
starting the work day, the brothers had both been found to be imposters 
and the standards authorities were immediately alerted. 


How were the twins caught in the act? 
Keep reading for more clues … 
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Looooong quotes 

Now that you know how to do short quotes, let’s 
tackle long ones. Tony’s given us a long quote 
with the Burma Shave jingle. 


In his journal, Tony just put the Burma Shave 
quote right inside his paragraph, but wouldn’t it 
be better if we pulled this quote out into a “block 
of its own, like this: 

I saw some Buv-ma Shave S*tylc si^s oy\ side 
-the v-oad -boday ： 


My Trip Arcvurvd thp U^A on j kgway 


Segway'n USA 

Documenting my trip around ihe US on my very own Scgway! 



55 



Passing 63\rs, 

you da^*t sec, 

May you, 

A 

0 ( c*tc\r^i*ty. 

dc-f'mi*tcly ^ ioy \{, be passmj a^y da\rs. 


1^ you <W 七 b ⑽ 七 

^ u vma ShaW slo^a^s a^rc 

v/cll tell you all abou-t 

rn just a ^cv/ ?ay s - 



That’s where the <blockquote> element comes 
in. Unlike the <q> element, which is meant for 


My first day of the tnp! 1 can't believe 1 finally got everything 
packed and ready to go. Because I'm on a Scgway. I wasn't able 
to bring a whole lot with me: cellphone, iPod, digital camera, and 
a protein bar. Just the essentials. As Lao Tzu would have said, 
•A journey of a thousand miles begins with one Segway/ 


short quotes that are part of an existing paragraph, 
the <blockquote> element is meant for longer 
quotes that need to be displayed on their own. 


Ifs important to use 
the right tool for the job, and 
the <blockquote> element is 
perfect for this job. 
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Adding a 〈 blockquote 〉 

Let’s get a <blockquote> into Tony’s online journal. 

Open your “journal.html’’ file and locate the July 14th 
entry. Rework the paragraph to look like this: 


To mscrb <b!odk<\uotc> 
clcrnc^, v/C -to tr^d 


<h2>July 14, 2012</h2> 

<P> 

工 saw some Burma Shave style signs on the 

side of the road today : 

</ p> ( - wc pu-t -the Bu\rma Shave tc%t *m the 

〈 blockquote 〉 __<blodk'uo*tc> 

Passing cars , 

When you can -1 see, Wc also put Imc o+ ic%i a 

May get you, _^ - ^' scpairatc Imc so \i reads moire like a 

A glimpse, Buirma Shave sloja^ 

Of eternity. 

〈 /blockquote 〉 _ Md -fihally, wc heed -to add a <P> 

<p> - -to stairt -this pavag^aph a-ftev 


工 definitely won't be passing any cars. "the <blo^k^uo*tc>. 


</p> 


❾ Time for another test drive. Open “journal.html” in your browser 
and take a look at the results of your work: 


<blodk^uo*tc> cxta^ts a 
scfav-a*tc blodk (like <f> 
docs), plus I 七 *mdcv>*ts *tKc 
3 bi*t *to make i*t 
look move like a <\uo*tc. 
Jus*t >wha*t >war>*tcd... 


eee My Trip Around I hr USA an j Srgw.iy 

( 4 »• ] ♦ f>le7//chapteri/journal/journal.html m QX w 

Segway'n USA 

Documenting my trip aiound the IJS on my very own Scp.way! 

August 20, 2005 


心二⑽:⑽ 

all Vmcs / 

Uts tome to 

that a H 
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questions about quotes and blockquotes 


tJiereiare no ^ 

Dumb Questi9ns 


So let me see if I have this right: I 
use <q> when I just want to have some 
quote in with the rest of my paragraph, 
and I use <blockquote> when I have a 
quote that I want to break out on its own 
in my web page? 

You've got it. In general you'll use 
<blockquote> if you want to quote something 
that was a paragraph or more, while you can 
use <q> anytime you just want to throw in a 
quote as part of your running text. 

Multiple paragraphs in a block 
quote? How do I do that? 

Easy. Just put paragraph elements 
inside your 〈 blockquote〉，one for each 
paragraph. Do try this at home. 

How do I know what my quotes 
or block quotes will look like in other 
browsers? It sounds like they may handle 
it differently. 

Yes. Welcome to the World Wide Web. 
You don’t really know what your quotes will 
look like without trying them out in different 
browsers. Some browsers use double quotes, 
some use italics, and some use nothing at 
all. The only way to really determine how 
they’ll look is to style them yourself, and we’ll 
certainly be doing that later. 


I get that the <blockquote> element 
breaks its text out into a little block of 
its own and indents it, so why isn’t the 
<blockquote> inside the paragraph, just 
like the <q> element is? 

Because the <blockquote> really is like 
a new paragraph. Think about this as if you 
were typing it into a word processor. When 
you finish one paragraph, you hit the Return 
key twice and start a new paragraph. To type 
a block quote, you’d do the same thing and 
indent the quote. Put this in the back of your 
mind for a moment; it’s an important point 
and we’re going to come back to it in a sec. 

Also, remember that the indenting is 
just the way some browsers display a 
<blockquote>. Some browsers might not use 
indentation for <blockquote>. So, don’t rely 
on a <blockquote> to look the same in all 
browsers. 

Can I combine quote elements? 

For instance, could I use the <q> element 
inside the <blockquote> element? 

Sure. Just like you can put a <q> 
element inside the <p> element, you can 
put <q> inside 〈 blockquote〉. You might do 
this if you’re quoting someone who quoted 
someone else. But a <blockquote> inside a 
<q> doesn’t really make sense, does it? 


You said that we can style these 
elements with CSS, so if I want to make 
the text in my <q> element italics and 
gray, I can do that with CSS. But couldn’t 
I just use the <em> element to italicize my 
quotes? 

Well, you could, but it wouldn’t be 
the right way to do it, because you’d be 
using the <em> element for its effect on the 
display rather than because you’re really 
writing emphasized text. If the person you 
were quoting really did emphasize a word, or 
you want to add emphasis to make a strong 
point about the quote, then go right ahead 
and use the <em> element inside your quote. 
But don't do it simply for the italics. There 
are easier and better ways to get the look 
you want for your elements with CSS. 
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building blocks 


Solved: The Case of the Elements Separated at Birth 


How were the identical quote twins found to be imposters so quickly? 

As you’ve no doubt guessed by now, <q> and <blockquote> were 
discovered as soon as they went to work and began to 
mark up text. <q>’s normally unobtrusive little quotes 
were popping out into blocks of their own, while 
<blockquote> , s quotes were suddenly being lost inside 
regular paragraphs of text. In follow-up interviews with 
the victims of the pranks, one editor complained, “I lost 
an entire page of liner quotes thanks to these wackos.’’ After 
being reprimanded and sent back to their respective jobs, <blockquote> 
and <q> fessed up to their wives, who immediately left town together in a 
T-Bird convertible. But that’s a whole ’nother story (it didn’t end well). 
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block and inline elements 


The rea[ truth behind the <q> and 〈 blockquote〉mystery 

Okay, it’s time to stop the charade: 〈 blockquote 〉 and <q> are actually different types of elements. 
The 〈 blockquote 〉 element is a block element and the <q> element is an inline element. What’s the 
difference? Block elements are always displayed as if they have a linebreak before and after them, 
while inline elements appear “in line” within the flow of the text in your page. 



glock: stands on its own 

<hl>, <hZ>, ... , <p>, BY\d <blodk«\uo*tc> art dll blodk elements. 



Inline: goes with the flow 

<^>, <a>, By\d <crn> a\rc ihlmc elements. 


Return 


h2 \ 

Return 



Return 


blockquote 



Wotk is 

disflaYcd ^ 0Ym, as 
J I 七 has a Vmckv-cak 

七 ^ ■ 1 七 . 




\ 


/ _BloC-k clcrwChts 

^ separate 

m*to 

blocks. 


<cy>, ov\ o't^cv' 

V^ay\d, like all 

mime clcwcy>-b, is 
wst delayed … 
*floY/ 0*(* 

i*b s m - 



Return 





RemeniLer- block elements stand on tkeir own; 
inline elements go witk tke flow. 
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building blocks 



Dumb Quest! 


ons 


Q/ I think I know what a linebreak is; it’s like hitting the carriage return 
on a typewriter or the Return key on a computer keyboard. Right? 

Pretty much. A linebreak is literally a “break in the line," like 
this, and happens when you hit the Return key, or on some computers, the Enter 
key. You already know that linebreaks in HTML files don’t show up visually when 
the browser displays a page, right? But now you’ve also seen that anytime you 
use a block element, the browser uses linebreaks to separate each “block ■” 




Once again, this all sounds great, 
but why is all this talk of linebreaks, 
blocks, and inline elements useful? Can 
we get back to web pages? 


Don’t underestimate the power of knowing how HTML 
works. You’re soon going to see that the way you combine 
elements in a page has a lot to do with whether elements 
are displayed as block or inline. We’ll get to all that. 

In the meantime, you can also think about block versus 
inline this way: block elements are often used as the major 
building blocks of your web page, while inline elements 
usually mark up small pieces of content. When you’re 
designing a page, you typically start with the bigger 
chunks (the block elements) and then add in the inline 
elements as you refine the page. 

The real payoff is going to come when we get to 
controlling the presentation of HTML with CSS. If you 
know the difference between inline and block, you’re 
going to be sipping martinis while everyone else is still 
trying to get their layout right. 
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carriage returns and the <br> element 


IVe been thinking 
about the Burma Shave lines. I wasn’t 
surprised that they weren’t broken up 
because we’ve said from the beginning 
that whitespace and linebreaks aren’t 
displayed by the browser... 


...but the only way I can think of 
to fix this is to put each one in 
a block element like a paragraph. 
Otherwise, how can you get the 
browser to add linebreaks? 


What if you had an element whose 
only job was to give you a linebreak 
when you needed one? 

Wouldn’t that be nice? You’d actually be able to make 
the browser pay attention and insert some carriage 
returns for a change. 

Turns out there is an element, the <br> element, just 
for that purpose. Here’s how you use it: 



pay. , ^ 


<h2>July 14, 2012</h2> 

<p> 

工 saw some Burma Shave style signs on the 
side of the road today : 


</p> 

<blockquote> 


Passing cars, <br> 
When you can 1 1 see 

,<br> 

May get you, <br> 

A glimpse, <br> 

Of eternity. <br> 
</blockquote> 



a <bv-> clewed *to ^ 


<p> 

工 definitely won't be passing any cars. 

</p> 
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EicegciSe 


Go ahead and add the <br> elements to Tony’s journal. After you 
make the changes, save the file, and give it a test drive. 




My Trip Around the USA on a Segway 


1 ► I [ + j0file:///chapter3/journal/journaLhtml C| Google J| 


wha 七 *tKc should 

look like- No>w rt v-cads like a 
Buv-ma Shave slogan should redd! 


Segway ? n USA 

Documenting my trip around the US on my very own Segway! 

August 20,2012 


它 aA Imc ⑽如 has a 

VmcWcak 七 cv ’ 七 . 


roi 


Chance, CO, Wliy, AZ and Truth or Consequences, NM. 

July 14, 2012 

I saw some Burma Shave style signs on the side of the road today: 

Passing, cars, 

When you can't 
May get you ， 

A glimpse, 

Of eternity . 

I definitely won't be passing any cars. 


se, 


Jirne 2, 2012 


My first day of the trip! I can't believe I finally got everything 
packed and ready to go. Because I'm on a Segway, I wasn't able 
to bring a whole lot with me: cellphone, iPod, digital camera, and 
a protein bar. Just the essentials. As Lao Tzu would have said, 
"A journey of a thousand miles begins with one Segway." 
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void elements have no closing tag 



In Chapter 1 we said that an element 
is an opening tag + content + closing 
tag. So how is <br> an element? It doesn’t 
have any content, and it doesn’t even 
have a closing tag. 


Exactly. It doesn’t have any content. 

The <br> element is an element that doesn’t have any content. Why? 
Because it’s just meant to be a linebreak, nothing else. So, when an 
element doesn’t have any real content by design, we just use a shorthand 
to represent the element and it ends up looking like <br>. After all, if we 
didn’t have this shorthand, you’d be writing <br></br> every time you 
needed a linebreak, and how much sense does that make? 

<br> isn’t the only element like this; there are others, and we have a name 


for them: void elements. In fact, we’ve already seen another void element, 
the <img> element. We’ll be coming back to look at the <img> element in 
detail in a couple chapters. 

Keep in mind, the reason for the shorthand isn’t laziness so much as it is 
efficiency. It’s more efficient to represent void elements this way (efficient 
in typing, in the number of characters that end up in a page, and so on). 
In fact, after reading HTML for a while, you’ll find that it is easier on 
your eyes too. 


/I 


They used 
*bo be called 
u cmp*by 

appav-c^ily 
made *too 
mu 匕 h stv\sc, so 

they 

them *to void- 
Personally, wc 
still like empiy. 




whole pom 七。 

■this is *to msc\rt 3 Imdov^ak. 

There’s \rcally 

1 


<br> 


_ 


s -the 匕 los.mg "tag. 


</br> 



<br> </br> 


rm half the 
element I used to 
be...(sniff sniff). 



卜 R。 ㈣ 

叫 bcWch those -tags. 


O 


0 


<br> 


Yeah, i-f wc just type this, 
it really v-cpv-csc^ts 
the same thmj. 
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Dumb Quest? 


9ns 


So, the only purpose of <br> is to insert a 
linebreak? 

Right; the only place the browser typically inserts 
breaks in your content is when you start a new block 
element (like <p>, <h1>, and so on). If you want to insert a 
linebreak into your text, then you use the <br> element. 

Why is <br> called an “void” element? 

Because it has no content, as in 
element = opening tag + content + closing tag. So, it’s void 
because there's no content and no closing tag. Think like 
the “void of space ”； there's nothing there, it's empty. 

I still don’t get it_ Explain why the 
<br> element is “void ”？ 

Think about an element like <h1> (or <p> or <a>)_ 
The whole point of the element is to mark up some content, 
like: 


<hl>Don't wait, order now</hl> 

With the <br> element, the point is just to insert a linebreak 
into your HTML. There is no content you are trying to mark 
up. We don’t need all the extra brackets and markup, so 
we just shorten it into a more convenient form. If you’re 
thinking “void” is kind of a weird name, you’re right: it 
comes from computer science and means “no value." 

Are there any other void elements? I think 
<img> must be a void element, too, right? 

Yes, there are a couple of them. You’ve already 
seen us use the <img> element, and we’ll be getting to the 
details of this element soon. 

Can I make any element void? For instance, if I 
have a link, and don’t want to give it any content, can I 
just write <a href=“mypage.html’’> instead? 


No. There are two types of elements in the world: 
normal elements, like <p>, <h1>, and <a>, and void 
elements, like <br> and <img>. You don’t switch back 
and forth between the two. For instance, if you just typed 
<a href=“mypage_html”> ， that’s an opening tag without 
content or a closing tag (not good). If you write 
<a href=“mypage_html”></a> ， that’s an empty element and 
is perfectly fine, but isn’t very useful in your page! 

I've seen pages not with <br>, but with <br/>. 
What does that mean? 

It means exactly the same thing. The syntax used 
in <br /> is a more strict syntax that works with XHTML. 
Wheneven you see <br/>, just think <br>, and unless 
you’re planning on writing pages compliant with XHTML 
(see the appendix for more information on XHTML), you 
should just use <br> in your HTML. 


Elements tkat don’t kave 
any content ty design 
are called void elements. 
Wken you neect to use a 
voict element, like 
or you only use 

an opening tag[. Tkis is 
a convenient skortkanct 
tkat reduces tke amount oi 


markup in your HTML. 
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we need a list for tony's site 


Meanwhile back at Towy's site.. 

You’ve come a long way already in this chapter: you’ve 
designed and created Tony’s site, you’ve met a few new 
elements, and you’ve learned a few things about elements 
that most people creating pages on the Web don’t even 
know (like block and inline elements, which are really 
going to come in handy in later chapters). 

But you’re not done yet. We can take Tony’s site from 
good to great by looking for a few more opportunities to 
add some markup. 

Like what? How about lists? Check this out: 



Thc\rc s a list Hghl hcv-c. Tihy 
wvo-tc the list o-P di-tics that 
he s bcch thv-ough \y\ his August 
jou\rhal Chtiry. 


Wouldn’t it be great if we could mark up this text so the 
browser knows this text is a list? Then the browser could 
display the list items in a more useful way. Something like this: 


l/Vlcll fvc made it I ZOO miles already, Sy\d 

I passed *th\rougii some oy\ 

-the >/ay ： 

I. lA/alla lA/alla, IA/A 


Z. / 1 /Iajid Ciiy, ID 
Z- UT 

午 . Last CO 
^ ^y, AZ- 

厶 . TVu*th o\r Cor^sc^ucmdcs, KM 


My Trip Around the USA on a Sefjway 


Well I made it 1200 miles alrcadv. ^nd T thrnnah 
intctcstinc places on the wav: 


Bountiful. UT, Last Chance, CO, Why. AZ and Truth or 
Consequences, NM 


July 14, 2012 

1 saw some Burma Shave style signs on the side of the road today: 


Passing cars. 
When you can’t 
May get you, 

A glimpse. 

Of eternity. 


I flcfinitcly won t be passing any cars. 

June 2,2012 


My first day of the tnp! I can t believe I finally got everything 
packed and rwdy to go. Because I’m on a Segway, I wasn't able t 
bring a whole lof with me: cel]{yhone t iPod, digital camera, and a 
proteiu bar. Just the essentials. As Lao Tzu would have said, "A 
journey of a thousand miles bcgiiw with one Segway.* 


Ko*tc 七灼 at or\ly is 
■this d list bu*t its By\ 
o^dcjrcdjist To^y visi*tcd 
-these cities \ y \ d pav-tidulav- 
ovdev-. 
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building blocks 


Remember, ifs 
important to use the 
right tool for the job, and 
the <p> element is NOT the 
right tool for this job. 


O 


o 



Of course, you could use the <p> 
dcmcwt to make a list... 


It wouldn’t be hard to make a list using the <p> element. 
It would end up looking something like this: 


<P> 

1. Red Segway 

</p> 


b^o preferred 
dolovs (or Sc —丫 


<P> 

2. Blue Segway 

</p> 


Put there arc lots of reasons moI to. 

You should be sensing a common theme by now. You 
always want to choose the HTML element that is closest 
in meaning to the structure of your content. If this is a 
list, let’s use a list element. Doing so gives the browser and 
you (as you’ll see later in the book) the most power and 
flexibility to display the content in a useful manner. 




_ 

Why not use <p> to make lists? 

(Choose all that apply.) 

A. HTML has an element for lists. 

If you use that, then the browser 
knows the text is a list, and can 
display it in the best way possible. 

B. The paragraph element is really 
meant for paragraphs of text, not 
lists. 

C. It probably wouldn’t look 
much like a list, just a bunch of 
numbered paragraphs. 

D. If you wanted to change the 
order of the list, or insert a new 
item, you’d have to renumber 
them all. That would suck. 

C D ^ V ^suy 
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constructing a list 


Cowstructiwg HTML lists in two easy steps 

Creating an HTML list requires two elements that, when used together, 
form the list. The first element is used to mark up each list item. The 
second determines what kind of list you’re creating: ordered or unordered. 

Let’s step through creating Tony’s list of cities in HTML. 


Step one: 

Put each list item in an <li> element. 

To create a list, you put each list item in its own <li> element, 
which means enclosing the content in an opening <li> tag and 
a closing </li> tag. As with any other HTML element, the 
content between the tags can be as short or as long as you like 
and broken over multiple lines. 




Locate this ttTyVJL 


youir jowrhal fvUJ” "file ahd 


<h2>August 20, 2012</h2> 

<img src="images/segway2 .jpg n > 


<P> 

Well I've made it 1200 miles already, and 工 passed 
through some interesting places on the way : 

Fi\rs-t, rwovc 七 he lis-t i-tems outside 七 he pav-ajv-aph. The 

list is jomg *to s*ta 灼 d o 灼 i-ts oym. 



<li>Walla 

Walla, 

WA</li> 

<li>Magic 

City, 

ID</li> 

<li>Bountiful, UT</li> 

<li>Last 

Chance A 

CO</li> 

<li>Why,. 

AZ</li> 


<li>Truth 

or Consequences , NM</li> 


With ah <li> ; </li> set tags. 


o( -these <l*i> 

will bedome 

i*tc^ ^ list 



<h2>July 14, 2012</h2> 

<p> 

工 saw some Burma Shave style signs on the side of 
the road today : 

</p> 
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Step two: 

Enclose your list items with either the <ol> or <ul> element. 

If you use an <ol> element to enclose your list items, then 
the items will be displayed as an ordered list; if you use <ul>, 
the list will be displayed as an unordered list. Here’s how you 
enclose your items in an <ol> element. 

wcVc jus 七 a o( 

WTML -fv-om Toy\^s jouVr>al hcv*C- 


<h2>August 20, 2012</h2> 

<img src="images/segway2. jpg"> 

<p> 

Well I've made it 1200 miles already, and 工 passed 
through some interesting places on the way : 

</P> 

<ol> 




<li>Walla Walla, WA</li> 

<li>Magic City, ID</li> 
<li>Bountiful, UT</li> 

<li>Last Chance, CO</li> 

<li>Why, AZ</li> 

<li>Truth or Consequences, NM</li> 



AH lis 七 items si 七 m 

middle <ol> 

By\A bedome its 乙 ojrrtctrrt 


</ol> 


hcv-c v/c dose the <ol> dement 


<h2>July 14, 2012</h2> 


<P> 

工 saw some Burma Shave style signs on the side of 
the road today : 
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test driving the list 


Taking a test drive through the cities 


^ ^ My Trip Around the USA on a Segway 

h |^file:///chapter3/journal/journal.html C ] (Or Google 


Make sure you’ve added all the HTML for the list, reload your 
c journal.html” file and you should see something like this: 


Segway’n USA 

Documenting my trip around the US on my very own Segway! 

August 20,2012 


*thc y\t>N 

impiroved list o-f cities. 



Well In 
interesti 


W 


2 . 


4 


Tri 

July 

I saw so 
today: 

Pa 


Well I made It 1200 mUcs already, and I passed through some 
interesting places on the way: , r 1L , 

TKcv-c S a IrncWcak kcW l»st 

4 - - s+a^*b, so <ol> must be a \>\otV cl ⑽此 

1.. Walla Walla，WA 似 

2.. Magic City, ID 

3 ■ Bountiful, UT But then's also a Imcbv-cak a-f-tev- 

4 、 Last Chance, CO 心〜 so <ii> be a bio^k W 

5. Why，AZ 

6, Truth or Consequences, NM 



M; 

A glimpse, 

Of eternity. 

I definitely won't be passing any cars. 

June 2, 2012 


a 


Kotitc *tV^c Wov/sev tavc 
of a uWa*Ualh/ tacM r.st 

i-tew (so ^o\a dor!i have *to). 



My first day of the trip! I can't believe I finally got everything 
packed and ready to go. Because I'm on a Segway, I wasn't able 
to bring a whole lot with me: cellphone, iPod, digital camera, and 
a protein bar. Just the essentials. As Lao Tzu would have said, 
"A journey of a thousand miles begins with one Segway." 


Sharpen your pencil 

is correct? y 


104 Chapter 3 

























building blocks 



Here’s another list from Tony’s journal: cell phone, iPod, digital camera, and a protein 
bar. You'll find it in his June 2nd entry. This is an unordered list of items. 

The HTML for this entry is typed below. Go ahead and add the HTML to change the 
items into an HTML unordered list (remember, you use <ui> for unordered lists). 
We’ve already reformatted some of the text for you. 

When you’ve finished, check your answers in the back of the chapter. Then make 
these changes in your "journal.html" file and test. 


<h2>June 2, 2012</h2> 

<img src= H segwayl.jpg n > 

<P> 

My first day of the trip! I can 1 1 believe 工 finally got 
everything packed and ready to go. Because 工 on a Segway, 
工 wasn 1 t able to bring a whole lot with me : 


cell phone 
iPod 

digital camera 
and a protein bar 


Just the essentials. As 

Lao Tzu would have said, <q>A journey of a 
thousand miles begins with one Segway.</q> 

</p> 
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more about lists 



Dumb Questi 


9 ns 


Do I always have to use <ol> and <li> together? 

Yes, you should always use <ol> and <li> together (or <ul> and 
<li>). Neither one of these elements really makes sense without the 
other. Remember, a list is really a group of items: the <li> element 
is used to identify each item, and the <ol> element is used to group 
them together. 

Can I put text or other elements inside an <ol> or <ul> 
element? 

No, the <ol> and <ul> elements are designed to work only with 
the <li> element. 

What about unordered lists? Can I make the bullet look 
different? 

Yes. But hold that thought. We’ll come back to that when we’re 
talking about CSS and presentation. 

What if I wanted to put a list inside a list? Can I do that? 

Yes, you sure can. Make the content of any <li> either <ol> or 
<ul>, and you’ll have a list within a list (what we call a nested list). 


<ol> 

<li>Charge Segway</li> Ncsicd lisi 
<li>Pack for trip 
<ul> 

<li>cell phone</li> 
<li>iPod</li> 

<li>digital camera</li> 
<li>a protein bar</li 彡 
</ul> 

</li> 

<li>Call mom</li> 

</ol> 


<li>. \i 

c^tloscs 

nested 

list 


I think I basically understand how block elements and 
inline elements are displayed by the browser, but I’m totally 
confused about what elements can go inside other elements, or, 
as you say, what can be "nested” inside of what. 

That’s one of the hardest things to get straight with HTML. This 
is something you’re going to be learning for a few chapters, and we’ll 
show you a few ways to make sure you can keep the relationships 
straight. But we’re going to back up and talk about nesting a little 
more first. In fact, since you brought it up, we'll do that next. 


So HTML has ordered and unordered lists. Are there any 
other list types? 


Actually, there is another type: definition lists. A definition list 
looks like this: UcM item m iht list 

/ has a tcv-m, <dt>, 

<di> ^ a dcs 乙 \rip*tioh <dd>. 

<dt>Burma Shave Signs</dt> 

<dd>Road signs common in the U.S. in 
the 1920s and 1930s advertising shaving 
products.</dd> 

<dt>Route 66</dt> 


<dd>Most famous road in the U.S. 


system.</dd> 
</dl> 


Burma Shave? 


N. Type this m a 灼 d 

^ivc it a *bry. 


highway 


Burma Shave was a company that made brushless shaving 
cream in the early part of the 20th century. They began advertising 
their product using roadside signs in 1925, and these signs proved to 
be very popular (if somewhat distracting for drivers). 


The signs were grouped in bunches of four, five, or six, each with one 
line from the slogan. At one point, there were 7,000 of these signs 
on roadsides throughout the United States. Most are gone now, but 
there are still a few left, here and there. 


106 


Chapter 3 


building blocks 


<Vvb^l> 





<< \ > 


Putting owe element inside 
another is called "westing" 

When we put one element inside another element, we 
call that nesting. We say, “the <p> element is nested 
inside the <body> element.” At this point, you’ve 
already seen lots of elements nested inside other 
elements. You’ve put a <body> element inside an 
<html> element, a <p> element inside a <body> 
element, a <q> element inside a <p> element, and 
so on. You’ve also put a <head> element inside the 
<html> element, and a <title> element inside the 
<head>. That’s the way HTML pages get constructed. 

The more you learn about HTML, the more 
important having this nesting in your brain becomes. 
But no worries — before long you’ll naturally think 
about elements this way. 


<< \ > ihsidc <p>, 
nested ihsidc <body >； 
lasted ihsidc <hUl>. 
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understanding nesting by drawing 


To understand the nesting 
relationships, draw a picture 

Drawing the nesting of elements in a web 
page is kind of like drawing a family tree. At 
the top you’ve got the great-grandparents, 
and then all their children and grandchildren 
below. Here’s an example … 

Simple web pay 



<html> 

<head> 

<title>Musings</title> 

</head> 

<body> 

<p> 

To quote Buckaroo, 
<q>The only reason 
for time is so 
that everything 
doesn't happen 
at once.</q> 

</p> 

</body> 

</html> 


<htm|> is always ihe 
clcmch-t ai -the v-oot 
the tv-cc. 


-t\ra^slaic this 

i^"to el wllCV*C 

elerweivt becomes a 

bo~ t3i(M Ime 匕 o>rme^ts 

the elemeKrt "to a^o-thev- clcrwchi 
"that is nested wi-th'm it 


<h*tml> hds *two nested 
dements ： <hcad> a^d 
<body>. Y^u dan 乙 all them 
both u ^hildv"C^ w o( <h*bml>. 



<*ti*blc> is nested y/i*th'm 

the <hcad> element. 



<body> »s r\cs*bcd v/rtiVm 
clement so wc say <body> is 
w tWild” j 


"The p3V"Ch*t 0-( <c^> is <p>, 

土卜 ya^i o( < P > IS <body> ; 3h d 

thc ^ <body> is <hUl>. 
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Using westing to make sure your tags match 

Your first payoff for understanding how elements are nested is that 
you can avoid mismatching your tags. (And there’s gonna be more 
payoff later; just wait.) 

What does “mismatching your tags” mean and how could that 
happen? Take a look at this example: 


so going to tweet <em>this</emX / p> 



Wcrcs how iWis WT/ViL looks ； 
is hcs-fccd ihside <p>. 





So far, so good, but it’s also easy to get sloppy and write some HTML 

that looks more like this: /n ^. . , 

-the <f> 

so going to tweet <em>thi s</pX/em> 

is suffosed *to be '\Y\S\dt 
<f> element 



Given what you now know about nesting, you know the <em> element 
needs to be nested fully within, or contained in, the <p> element. 



^00l ) ： liCV*C "the <Crw> is 

nested inside 七 he <p>. 


p 

- 

em 

T ^ - 

' 3AV : hcv-c the <cm> element has leaked ouisidc 
<f> element y/hidh its y \ o {, p\rofC\rly nested 'msidc i*t- 



So what? 

It’s okay to mess up your nesting if you like playing Russian roulette. If you write HTML 
without properly nesting your elements, your pages may work on some browsers but not 
on others. By keeping nesting in mind, you can avoid mismatching your tags and be sure 
that your HTML will work in all browsers. This is going to become even more important 
as we get more into “industrial strength HTML” in later chapters. 
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catching mismatched tags 



<html> 

<head> 

<title>Top 100</title> 

<body> 

<hl>Top 100 

<h2>Dark Side of the Moon</h2> 

<h3>Pink Floyd</h3> 

<p> 

There * s no dark side of the moon; 

</pX/q> 

<ul> 

<li>Speak to Me / Breathe</li> 

<li>On The Run</li> 

<li>Time</li> 

<li>The Great Gig in The Sky</li> 

<li>Money</li> 

<li>Us And Them</em> 

<li>Any Colour You Like</li> 
<li>Brain Damage</li> 

<li>Eclipse</li> 

</ul> 

</p> 

<h2>XandY</h3> 

<h3>Coldplay</h2> 

<ol> 

<li>Square One 
<li>What If? 

<li>White Shadows 
<li>Fix You 

<li>Talk 

<li>XandY 

<li>Speed of Sound 
<li>A Message 
<li>Low 

<li>Hardest Part 
<li>Swallowed In The Sea 


BE B 鱗總 

Below, you’ll find an HTML file 
witii some mismatched ta^s in it. 
Your job is to play like you’re Ae 
browser and locate all the errors. 
After you’ve done {ke 
exercise, look at tire 
end of tire chapter to 
see if you caught all 
Ae errors. 



matter of fact <q>i t * s all dark. 


<li>Twisted Logic 

</ul> 

</body> 

</head> 
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A bunch of HTML elements, in full costume, are playing a party 
game, “Who am I?” They’ll give you a clue—you try to guess who 
they are based on what they say. Assume they always tell the 
truth about themselves. Fill in the blanks to the right to identify 
the attendees. Also, for each attendee, write down whether or not 
the element is inline or block. 

Tonight’s attendees: 

Any of the charming HTML elements you’ve seen so far just 
might show up! 



Name 


Mm or 
block? 


I’m the #1 heading. 


I’m all ready to link to another page. 


Emphasize text with me. 

I’m a list, but I don’t have my affairs in order. 

I’m a real linebreaker. 


I’m an item that lives inside a list. 


I keep my list items in order. 


I’m all about image. 

Quote inside a paragraph with me. 

Use me to quote text that stands on its own. 


you are here ► 


111 






















character entities are for special characters 



I was just creating a web page 
explaining everything I was learning from 
this book, and I wanted to mention the <html> 
element inside my page. Isn't that going to 
mess up the nesting? Do I need to put double 
quotes around it or something? 


You’re right, that can cause problems. 


Because browsers use < and > to begin and end tags, using them in 
the content of your HTML can cause problems. But HTML gives 
you an easy way to specify these and other special characters using 
a simple abbreviation called a character entity. Here’s how it works: 
for any character that is considered “special” or that you’d like to 
use in your web page, but that may not be a typeable character 
in your editor (like a copyright symbol), you just look up the 
abbreviation and then type it into your HTML. For example, the > 
character’s abbreviation is &gt; and the < character’s is &lt;. 


So, say you wanted to type “The <html> element rocks.” in your 
page. Using the character entities, you’d type this instead: 


The &lt ;html&gt; element rocks. 

Another important special character you should know about is the 
& (ampersand) character. If you’d like to have an & in your HTML 
content, use the character entity &amp; instead of the & character 
itself. 

So what about the copyright symbol (that’s &copyright;)? And 
all those other symbols and foreign characters? You can look up 
common ones at this URL: 

http :/ /www.w3schools.com/tags/ref—entities•asp 
or, for a more exhaustive list, use this URL: 
http :// www.Unicode.org/charts/ 
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tJiereiare no 。 

Dumb Questi9ns 


Wow, I never knew the browser 
could display so many different 
characters. There are a ton of different 
characters and languages at the 
www.unicode.org site. 

Be careful. Your browser will only 
display all these characters if your computer 
or device has the appropriate fonts installed. 
So, while you can probably count on the 
basic entities from the www.w3schools.com 
page to be available on any browser, there is 
no guarantee that you can display all these 
entities. But, assuming you know something 
about your users, you should have a good 
idea of what kind of foreign language 
characters are going to be common on their 
machine. 


You said that & is special and I 
need to use the entity &amp; in its place, 
but to type in any entity I have to use a &■ 
So for, say, the > entity, do I need to type 
&amp;gt;? 

No, no! The reason & is special is 
precisely because it is the first character of 
any entity. So, it’s perfectly fine to use & in 
your entity names, just not by itself. 

Just remember to use & anytime you type in 
an entity, and if you really need an & in your 
content, use &amp; instead. 


When I looked up the entities at the 
www.w3cschools.com, I noticed that each 
entity has a number too. What do I use 
that for? 

You can use either the number, like 
&#100 or the name of an entity in your HTML 
(they do the same thing). However, not all 
entities have names, so in those cases your 
only choice is to use the number. 



Crack fhe Location Challenge 

Dr. Evel, in his quest for world domination, has put up a private web page to be 
used by his evil henchmen. You’ve just received a snippet of intercepted HTML 
that may contain a clue to his whereabouts. Given your expert knowledge of 
HTML, you’ve been asked to crack the code and discover his location. Here’s a 
bit of the text from his home page: 


There's going to be an evil henchman meetup 
next month at my underground lair in 
&#2 08;&epsilon;&tau;& #114;&ouml;&igrave;&tau;. 
Come join us. 


ttm 七 ： visit / y/y/y/.y/3sdKools.dom/*tajs/vc-f^_cirvtitics.asp 

Bv\d /ov *tyfc m 七 Kc HTML and see youv bvoy/sev displays. 
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tasting a few elements 


Element 


SoU]^ 


y ou wah £ 心 
a |咏 youll hCCC ( 
<5> dcmcht 


■tKc 


<a> 


<em> 

Use -tKis clcrwc^-t "bo f] 

mav-k up yoJd J 

say m a 

voice, like i-f you avc 


<time> 

^ TWis element -tells -tV>c 

brov/sev 柹 a 七七 k «S 

a date or tiw'Ci oV " 


<strong> Wsc 七 W|S 士你⑼七 w 沖吖 

you Ci^ii3siz«ccl 
W\i\\ t^bra stvc^-tii. 


<Pre> 


Use "bKis clcmcirt't 

-fov-ma-t-ted it%i v/Ken you v /如七 
■tV^c bv-ov/sev to sKovz youv- te 乂七 
c^ad-tly as t/fed it. 


Use tWis element ^ov sj^ort 

'UO"td.YO 认 k>r\OV/) like "to 

o^r not to be；' or W No mattej 

v/Keve you 50, -b^eve you avc- 





JuS-t 5>^C mr»C a 

ipava^v-a^, please- 

TV>c dode clcmc^-t »s 

•fov display>^5 -fv-om 3 

domfu-tev pvo^ram- 


<Ul> 

/^d 少 display a lis-t? £ay ; a U ^ 


|-f you rteed art 

<ol> ovdeved lis-t mstead, 

use the <ol> clcw»cr>t 

WsU W 




A void elemeivt for 
makm^ I'mcbv-caks. 





Relate svr? .. 


—^ TKis is 3 k» clcrwc^'t 
( -fov mdludi^ 3 k> 

irv«a^ like a fKo-to, 
<img> •m youv pay. 


This is -fov Ic^^-tKy ^uo^tio^s 一 
sonftctK'm^ tKat you y/a>r»-t "bo 
Ki^Kli^lvt as a Icmyv passage, say, 
-fv-orw a book- 





Here are a bunch of elements you 
already know, and a 
few you don’t- 

Remember, half the fun of HTML 
is experimenting! So make some 
files of your own and try these 

out. 




1 


r 
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building blocks 


RockirV page. Ifs perfect for 
my trip and it really does a good job of 
providing an online version of my journal. 
Youve got the HTML well organized too, so 
I should be able to add new material myself. 
So, when can we actually get this off your 
computer and onto the Web? 


BULLET POINTS - 

■ Plan the structure of your web pages before you ■ 
start typing in the content. Start with a sketch, u 
then create an outline, and finally write the 



<br> is a “void” elemMt. 

Void elements have no content. 


HTML. 


■ A void element consists of only one tag. 


Plan your page starting with the large, block 
elements, and then refine with inline elements. 


An “empty” element has no content. But it does 
have both opening and closing tags. 


■ Remember, whenever possible, use elements to 
tell the browser what your content means. 

■ Always use the element that most closely 
matches the meaning of your content. For 
example, never use a paragraph when you 
need a list. 

■ <p>, <blockquote>, <ol>, <ul>, and <li> are 
all block elements. They stand on their own 
and are displayed (by default) with a linebreak 
above and below the content within them. 


■ A nested element is an element contained 
completely within another element. If your 
elements are nested properly, all your tags will 
match correctly. 

■ You make an HTML list using two elements in 
combination: use <ol> with <li> for an ordered 
list; use <ul> with <li> for an unordered list. 

■ When the browser displays an ordered list, it 
creates the numbers for the list so you don’t 
have to. 


<q> and <em> are inline elements. The content 
in these elements flows in line with the rest of 
the content in the containing element. 

Use the <br> element when you need to insert 
your own linebreaks. 


You can build nested lists within lists by putting 
<ol> or <ul> elements inside your <li> elements 

Use character entities for special characters in 
your HTML content. 
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right brain resting station 



HTMLcposs 

It’s time to give your right brain a break and put that left brain to work: all the 
words are HTML-related and from this chapter. 



Across 

I. Tony’s transportation. 

8. Famous catchy road signs. 

10. <q> is this type of element. 

II. Another void element. 

13. Element without content. 

14. Major building blocks of your pages. 

15. Use <ol> for these kinds of lists. 


Down 

2. Left together in a T-bird. 

3. Max speed of a Segway. 

4. Tony won’t be doing any of this. 

5. Putting one element inside another is 
called this. 

6. Requires two elements. 

7. Block element for quotes. 

9. Use <ul> for these kinds of lists. 

12. Void elements have none. 
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building blocks 



plyiipH 


Here’s the rework of Tony’s Lao Tzu quote using the <q> element. Did 
you give your solution a test drive? 


Hcvc s -tKc part 


< P > 


My first day of the trip ! 工 can't believe 工 finally got 
everything packed and ready to go. Because I'm on a 
Segway , 工 wasn't able to bring a whole lot with me: 
cell phone, iPod, digital camera, and a protein bar. Just 
the essentials. As Lao Tzu would have said, <q>A journey 
of a thousand miles begins with one Segway. </q> 

</p> 


^ added «\> 

at He 

Kot'itc also 

amoved double —es. 


\\trts -tKc -test drive... 



Okav ； >*t doesr / 七 L00i( 

but do^*t you r 

bc*b*tcv noy/? 


L 


My first day of the trip! I can't believe I finally got everything 
packed and ready to Because I'm on a Segway, I wasn't able 
to bring a whole lot with me: cellphone ， iPod ， digital camera, 
and a protein bar. Just the essentials. As Lao Tzu would have 
said s ''A journey of a thousand miles begins with one Segway." 
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exercise solutions 



Here’s another list from Tony’s journal: cell phone, iPod, digital 
camera, and a protein bar. You’ll find it in his June 2 entry. This is an 
unordered list of items. 

Make these changes in your "journal.html" file, too. Does it look like 
you expected? 


<h2>June 2, 2012</h2> 
<img src= n segwayl.jpg M > 


<p> 


</p> 

<ul> 


My first day of the trip ! 工 can 1 1 believe 工 finally got 
everything packed and ready to go. Because I'm on a Segway, 
工 wasn't able to bring a whole lot with me: 


S*tav*t the uhovdeved list 
Put cadh item m*bo <li> clcmch*t. 


<li>cell phone</li> 
<li>iPod</li> 

<li>digital camera</li> 
<li>and a protein bar</li> 


Ehd the Uho\rdc\rcd list 


</ul> 

<p> 




Ahd 




hew 


Just the essentials. As 


p 的 giraph. 


Lao Tzu would have said, <q>A journey of a 
thousand miles begins with one Segway. </q> 

</p> 
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<html> 

<head> 

<title>Top 100</title> 
<body> 

<hl>Top 100 4 . — 






/\/l*issnrv^ dlosm^ *b 3 ^ 


<p> by\A <<\> arc ho*t nested 
properly ： the </p> -tag should 
dome a-rtev the </'> -tag. 


We have a dlosm^ </cm> Were >wc 
should V>ave a ^losm^ </li> 


<h2>Dark Side of the Moon</h2> 

<h3>Pink Floyd</h3> 

<p> 

There * s no dark side of the moon; matter of fact <q>it * s all dark. 

</pX/q> 

<ul> 

<li>Speak to Me / Breathe</li> 

<li>On The Run</li> 

<li>Time</li> 

<li>The Great Gig in The Sky</li> 

<li>Money</li> 

<li>Us And Them</em> 

<li>Any Colour You Like</li> 

<li>Brain Damage</li> 

<li>Eclipse</li> 

</ul> 

</p> ^ - 

<h2>XandY</h3> 


<h3>Coldplay</h2> 

<ol> 

<li>Square One 
<li>What If? 
<li>White Shadows 
<li>Fix You 

<li>Talk 

<li>XandY 

<li>Speed of Sound 
<li>A Message 
<li>Low 

<li>Hardest Part 



Here’s a dlosm^ </^> 七 ha 七 docs 的七 
ma-tdK a^y <y> ^ 

槪 uf the dosmg </Wl> a^d </\A> -tags oh these hcad—s. 

I/Vc stay* 七 ed 如 <ol> list, but its 
y/ith d dosir^ </ul> 



4-% WcVc all ouv 

dlosm^ </V»> *t^ s - 


<li>Swallowed In The Sea 
<li>Twisted Logic 

</ui> ^ This doesn't the <ol> tag a*t the s-tavt the list above. 

</body> ; 

</head> ^""" trc\rc s ou\r 州 iss’rng </Kcad> bu 七 v/cVc 州 iss’nr^ a dlos'rn^ </h*tml> 
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exercise solutions 



A bunch of HTML elements, in full costume, are playing a party 
game “Who ami?” They gave you a clue—you tried to guess 
who they were based on what they said. 

Tonight’s attendees: 

Quite a few of the charming HTML elements you’ve seen so far 
showed up for the party! 



I’m the #1 heading. 


I’m all ready to link to another page. 


Emphasize text with me. 

I’m a list, but I don’t have my affairs in order. 

I’m a real linebreaker. 

I’m an item that lives inside a list. 

I keep my list items in order. 


I’m all about image. 


Quote inside a paragraph with me. 

Use me to quote text that stands on its own. 


Name 

hi 

a 

m 

ul 

br 


ol 

img 


blockquote 


Mm or 


block? 

rtmm, i*t looks 

like 

BUT <a> 

block 

v/v-a\> blodk 

\ust 七 wt. So, 

厂 oy\ 

hmm..: 

inline 

mime ov 

blo^k. 

<bv-> is iy\ limbo 


block 

block 

la^d 

blodk air\di mime. 
一 1 七 does d.vca*tc 

bu 七 does〆 七 
bv-cak a bi-t 
o-f 七作七 

*bwo scpav-a*tc 

lolodks, like i-f 


you had i>wo <p> 

block 

elements. 


I/Vc 


mime 

bu"t ； yes ， 
<imj> is mime. 
i*t some 


"thoujK-t dhd 

block 

we’ll dome 
badk *to 七 liis ih 
CKaftcv- 
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Cv^ok lire Location Challenge 


You dould hdvc looked up c^*ti*by 
ov -ty^cd *m. |i^ ci*tKcv ^3sc> *tlic 

a^sv/cv looks like pdort! 



There's going to be an evil henchman meetup 
next month at my underground lair in 
&#208;&epsilon;&tau;& #114;&ouml;&igrave; 
&tau;. Come join us. 
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4 getting connected 



A Trip to Webville, 


Web pages are a dish best served on the Internet. 

So far you’ve only created HTML pages that live on your own 
computer. You’ve also only linked to pages that are on your own 
computer. We’re about to change all that. In this chapter we’ll 
encourage you to get those web pages on the Internet where all 
your friends, fans, and customers can actually see them. We’ll also 
reveal the mysteries of linking to other pages by cracking the code 
of the h，t, t, p， ：，/,/， w，w, w. So, gather your belongings; our next 
stop is Webville. 

WARNING: once you get to Webville, you may never come back. 
Send us a postcard. 


this is a new chapter 
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getting on the web 


fretting Starbuzz (or yourself) 
onto the Web 

You’re closer to getting Starbuzz — or even better, your own site 
on the Web than you might think. All you need to do is find a 
“web hosting company” （ we’ll call this a “hosting company” from 
now on) to host your pages on their servers, and then copy your 
pages from your computer to one of those servers. 

Of course it helps to understand how your local folders are going 
to “map” to the server’s folders, and once you put your pages 
on the server, how you point a browser to them. But we’ll get to 
all that. For now, let’s talk about getting you on the Web. Here’s 
what you’re going to need to do: 

o Find yourself an hosting company. 

A Choose a name for your site (like 
www.starbuzzcoffee.com). 

o Find a way to get your files from your 
computer to a server at the hosting 
company (there are a few ways). 

❹ Point your friends, family, and fans 
to your new site and let the fun 
begin. 



We’re going to take you through each of these steps, and even 
if you’re not going to set up a website online right now, follow 
along because you’ll learn some important things you’ll need 
to know later. So, get ready for a quick detour from HTML … 


A Web Detour 
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Finding a hosting company 

To get your pages on the Web, you need a server that 
actually lives on the Web full-time. Your best bet is to find 
a hosting company and let them worry about the details 
of keeping a server running. No worries, though; finding a 
hosting company is fairly straightforward and inexpensive. 

Which company? Well, we’d love to sign you up for web 
hosting at Head First Hip Web Hosting, Inc., but that 
doesn’t really exist. So, you’re going to have to do a little 
homework on your own. While finding a company to host 
your pages isn’t difficult, it’s kind of like choosing a cable 
TV company: there are lots of options and plans. You really 
have to shop around for the best deals and for the service 
that works for you. 



A Web Detour 

Otie-miiiute Jiosting guider- 


We can’t tell you everything you need to know 
about getting a hosting company (after all, 
this book is about HTML and CSS), but we’re 
going to give you a good push in the right 
direction. Here are some features to think 


about while you’re shopping. 


■ Technical support: Does the hosting 
company have a good system for handling 
your technical questions? The better ones 
will answer your questions quickly either 
over the phone or via email. 


The good news is that you should be able to get started for 
almost nothing out of your pocket, and you can always 
upgrade later if you need additional features. While we 
can’t suggest a particular provider, we can tell you a few 
things to look for in a provider, and we also list a few of the 
more popular providers at: 

http :// wickedlysmart.com/hosting-providers/ 


-Pv-om 

if a Kos-t'mg £or>tpar>y 
v/iri-tcs a big Chou 讣 
thc<ik ; wc e.aJ 



You don’t have to 
get your pages on 
the Web to finish 
this book. 

While ifs a lot more fun if Y our P^ S 

are actually you can tosh 
the rest of this book by working o 
your own computer. 

In either case, follow along for the next 

二 e -y 一一一 

fits together. 


■ Data transfer: This is a measure of the 
amount of pages and data the hosting 
company will let you send to your visitors 
during a given month. Most hosting 
companies offer reasonable amounts of 
data transfer for small sites in their most 
basic plans. If you’re creating a site that 
you expect will have lots of visitors, you 
may want to carefully look into this. 

■ Backups: Does the hosting company 
regularly make a backup of your pages 
and data that can be recovered in the event 
that the server has a hardware failure? 

■ Domain names: Does the hosting 
company include a domain name in its 
pricing? More about these on the next page. 

■ Reliability: Most hosting companies report 
keeping websites up 99% of the time or 
better. 

■ Goodies: Does your package include 
other goodies such as email addresses, 
forums, or support for scripting languages 
(something that may become important to 
you in the future)? 
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HELLO, my A name is... 

Even if you’ve never heard of a domain name, you’ve seen and used a 
zillion of them; you know … google.com, facebook.com, amazon.com, 
disney.com, and maybe a few you wouldn’t want us to mention. 

So what is a domain name? Just a unique name that is used to locate 
your site. Here’s an example: 


domain 


TV/is part 七 domain 




www.starbuzzcoffee.com 



Thc\rc av-c di- 


This pav-t is the 
SCV-VCV- IK the 


^vr— 

domdih ^Chdihjs^ 

士 or d\Hc^i purposes ： .co^ .OY% .ftov, 
•cdu ； ahd also -Po\r differ ⑶ t douhtv-ics ： 

. 乙 o.uk, dojp, 3hd so Oh. I/Wh dkoosiha a 
domain pidk tk ohc thaUd f its you. 


There are a couple of reasons you should care about domain 
names. If you want a unique name for your site, you’re going to 
need your own domain name. Domain names are also used to link 
your pages to other websites (we’ll get to that in a few pages). 


There is one other thing you should know. Domain names are 
controlled by a centralized authority (ICANN) to make sure that 
only one person at a time uses a domain name. Also (you knew it 
was coming), you pay a small annual registration fee to keep your 
domain name. 

How can you get a domain wamc? 

The easy answer is to let your hosting company worry about it. 
They’ll often throw in your domain name registration with one of 
their package deals. However, there are hundreds of companies 
that would be glad to help — you can find a list of them at: 


http: //www. internic. net/ regist. html 

As with finding a hosting company, we’re afraid we’ll have to leave 
you to find and register your own domain name. You’ll probably 
find that going through your hosting company is the easiest way to 
get that done. 




SOLD 


FOR 
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Dumb Questi 


9ns 


Why is it called a “domain name” 
rather than a ‘‘website name ”？ 

Because they are different things. If 
you look at www.starbuzzcoffee.com, that’s a 
website name, but only the “starbuzzcoffee. 
com” part is the domain name. You could 
also create other websites that use the same 
domain name, like corporate.starbuzzcoffee. 
com or employees.starbuzzcoffee.com. So 
the domain name is something you can use 
for a lot of websites. 

If I were going to get the domain 
name for Starbuzz, wouldn’t I want to 
get the name www.starbuzzcoffee.com? 
Everyone seems to use websites with the 
www at the front. 


Again, don’t confuse a domain name 
with a website name: starbuzzcoffee.com is 
a domain name, while www.starbuzzcoffee. 
com is the name of a website. Buying a 
domain is like buying a piece of land; let’s 
say, 100mainstreet.com. On that land, 
you can build as many websites as you 
like, for example: home.lOOmainstreet. 
com, toolshed.100mainstreet.com, and 
outhouse.100mainstreet.com. So www. 
starbuzzcoffee.com is just one website in the 
starbuzzcoffee.com domain. 

What’s so great about a domain 
name anyway? Do I really need one? My 
hosting company says I can just use their 
name, www.dirtcheaphosting.com? 


If that meets your needs, there is 
nothing wrong with using their name. But 
(and it’s a big but) here’s the disadvantage: 
should you ever want to choose another 
hosting company, or should that hosting 
company go out of business, then everyone 
who knows your site will no longer be able to 
easily find it. If, on the other hand, you have 
a domain name, you can just take that with 
you to your new hosting company (and your 
users will never even know you’ve switched). 

If domain names are unique, that 
means someone might already have mine. 
How can I find out? 

Good question. Most companies that 
provide registration services for domain 
names allow you to search to see if a name is 
taken (kind of like searching for vanity license 
plates). You’ll find a list of these companies at 
http://www.internic.net/regist.html. 



ttcv-c^s 3 y\ c^cvdisc you 
*to fcvsor>ally bu*t 


vedlly *to of-f av>d do oy\ youv ov/r>. WIc A love 
七 o^ly so mudii you 3sk book 3 u"ti^oV"S (dd 
youVc oy\ vada*tioy> is pvobably ou 七 *too). 


DO fry 乐料时 k 膨 

It’s time to seek out a hosting company and grab a domain name for your site. Remember, you can 
visit Wickedly Smart for some suggestions and resources. Also remember that you can complete the 
book without doing this (even though you really should!). 


My Web Hosting Company: 
My Pomain Name: 


you are here ► 


127 











A Web Detour 

Moving m 

Congratulations! You’ve got your hosting company 
lined up, you’ve found a domain name, and you’ve 
got a server all ready for your web pages. (Even 
if you don’t, keep following along because this is 
important stuff.) 

Now what? Well, it’s time to move in, of course. 

So, take that For Sale sign down and gather up all 
those files; we’re going to get them moved to the 
new server. Like any move, the goal is to get things 
moved from, say, the kitchen of your old place to 
the kitchen of your new place. On the Web, we’re 
just worried about getting things from your own root 
folder to the root folder on the web server. Let’s get 
back to Starbuzz and step through how we do this. 
Here’s what things look like now: 



HANDLE V«TWCAR£ 


_l_ : 

HTML and Images 

LOCATION: 



艮 oot folder 





s the hew web scv-vcv-. The 
hostmg has dlv'eady 

^v-catcd a \roo 七 -Poldev- -Pov- you, 

r whidh is whc\rc a\\ youv- 
goih 0 -fco go. 


Youv domfuW, v/V^CV-C 

pays 娜吻 I ，吡 


the hew website hame. 1/VcVc 

doma’m (s\y\U wc bcai you -to it, \ 

you’ll have -fco use you\r owh do^oi'm ^ 

_ www.starbuzzcoffee.com 


starbuzz 


Rcw'Cw'kcv- youv- 
Stavbuz 工 \>a^cs? TKcv-c 
avc *tv/o ： *tV^c wdm pajc 

(mde 乂 上七州 1 ) a 竹 d 

pay 七 ha 七 toyrtdms 
七 mission S*ta*tcw»cy\*t 


starbuzz 
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A Web Detour 


Wait a sec, what’s the “root folder” 
again? 

Up until now, the root folder has 
just been the top-level folder for your 
pages. On the web server, the root folder 
becomes even more important because 
anything inside the root folder is going to be 
accessible on the Web. 

My hosting company seems to 
have called my root folder 
"mydomain_com”. Is that a problem? 



Not at all. Hosting companies call root 
folders lots of different things. The important 
thing is that you know where your root folder 
is located on the server, and that you can 
copy your files to it (we’ll get to that in a sec). 

So let me make sure I understand. 
We’ve been putting all our pages for the 
site in one folder, which we call the root 
folder. Now we’re going to copy all that 
over to the server’s root folder? 


Exactly. You’re going to take all the 
pages on your own computer, and put 
them all inside your site’s root folder on the 
hosting company server. 

What about subfolders, like the 
“images” folder? Do I copy those too? 

Yes, you’re basically going to replicate 
all the pages, files, and folders in your own 
root folder onto the server. So if you've got 
an “images” folder on your computer, you’ll 
have one on the server too. 


fretting your files to the root folder 


You’re now one step away from getting Starbuzz Coffee on the Web: 
you’ve identified the root folder on your hosting company’s server 
and all you need to do is copy your pages over to that folder. But how 
do you transfer files to a web server? There are a variety of ways, 
but most hosting companies support a method of file transfer called 
FTP, which stands for File Transfer Protocol. You’ll find a number 
of applications out there that will allow you to transfer your files via 
FTP; we’ll take a look at how that works on the next page. 


The -files av-c 

。灼 you\r 
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A Web Detour 

As much FTP as you caw possibly fit m two pages 

Seriously, this really is an HTML and CSS book, but we didn’t want to leave you up a creek 
without a paddle. So, here’s a very quick guide to using FTP to get your files on the Web. Keep 
in mind your hosting company might have a few suggestions for the best way to transfer your files 
to their servers (and since you are paying them, get their help). After the next few pages, we’re off 
our detour and back to HTML and CSS until we reach the end of the book (we promise). 

We’ll assume you’ve found an FTP application. Some are command-line driven, some have 
complete graphical interfaces, and some are even built into applications like Dreamweaver and 
Expression Web. They all use the same commands, but with some applications you type them in 
yourself, while in others you use a graphical interface. Here’s how FTP works from 10,000 feet: 


① First, connect to your server using FTP. 


To Coy\y\ct{„ youll 3 

drtd password sullied 
by youv- hostmj dompa^y- 

\/- 


ftp www.starbuzzcoffee.com 





t=3 


Tiic y/ovds w -foldcv 
ar\A w d'ivc^*tov-y w av-c 
•m 七 ev 吐 a%eable. Most 
FTP applications use 
i\\t y/ovd w di 代匕 W/” 



www.starbuzzcoffee.com 




② 


Jfoldcv u>cvc- 

Use the ' 、 cd 〃 command to change your current directory to 龜 {y^sker 彳祕 


the directory where you want to transfer files. 

cd starbuzz 


'you 









Y 喊 

s-tav-buzz- 


www.starbuzzcoffee.com 


③ Transfer your files to the server using the U put 〃 command. 


tu 代⑶七 ovy 

七 sc\rvc\r. 






index.html 
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④ You can also make a new directory on the server with 

• I i # ## I I his 


A Web Detour 


the u mkdir H command. 



■~ his is > st likc a hew 4ldcv-, ohly youVc 

domg it Oh the scirvcir, hot youv- oy/h dor^u 七饮 . 


starbuzz 




index.html 


images 



Creates a hew 
di\r^to\ry called 
images , inside the 
sta\rbuzi div-c^tov-y 
Oh tKc sc\rvc\r. 


You can retrieve files too, with the 、 'get 〃 command. 

get index.html 



index.html 





www.starbuzzcoffee.com 


Tyrahs-fc\rs a dopy Jc the 
•Pile -fv-om the scv-vcv- badk 
"to you\r dorhputcir. 


Let’s put all that together. Here’s an example of 
FTP being used from a command-line application: 



%ftp WWW. starbuzzeoffee•com 

Connected to www. starbuzzeof fee. com and log m- 

Name: headfirst 〔 

Password: ****** a dired-tory o\ 

230 User headfirst logged in. ,s 七 ^ 代 . 

ftp> dir ciivcd*to\ry 

drwx - 4096 Sep 5 15:07 starbuzz 4r dallcd 

ftp> cd starbuzz Change b> the s-brbuzi 

CWD command successful s*ta\rbuzz. di\rcd*tov-y. 
ft P > put index.html ^丄 

Transfer complete. - 七 he 代 . 

ftp> dir 

- 1022 Sep 5 15:07 index.html Uok aUKc 

ftp> mkdir images airedtory ； Acre's 

Directory successfully created mde%.ivW. 

ftp> cd images ^ N r 

CWD command successful Make a dired^ory -fov images, ad 

ftp> bye <\ui*t usmj 七 lie bye dommand- 


Coined 七 3r»d loj m- 


File Edit Window Help Jam 


a/i l t^TP tow\t *fv»C^dl'CV 

Most FTP 辦 oVcr 

ara ? W»6al m-tc^adcs, so ^cUvccto r ^ 

° ,jf V ouVc usm^ O^C O-V iV^osc. 

pTp coiiiinaiids 


dalled 

stav-buzz. 


Tva^s-fcv- mdex.litml 
tiicirc. 

ltml L 00 k a 七 
— / diiv-cd*tovy; *tKcv 


L Make a div-cd-fcovy -fov images, 

usmg *tKc bye domrm 


Whether you’re typing in FTP commands 
on the command line, or using an FTP 
application with a graphical interface, the 
commands or operations you can perform 
are pretty much the same. 

■ dir: get a listing of the current directory. 

cd: change to another directory/..” 
means up one directory here, too. 

display the current directory you're 
in. 

put 〈 filename〉: transfers the specified 
filename to the server. 

get 〈 filename〉: retrieves the specified 
filename from the server, back to your 
computer. 


■ 


■ 


■ 


■ 
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A Web Detour 


tJiereiare no ^ 

Dumb Questi9ns 


My hosting company told me to use 
SFTP, not FTP. What’s the difference? 

SFTP, or Secure File Transfer Protocol, 
is a more secure version of FTP, but works 
mostly the same way. Just make sure your 
FTP application supports SFTP before you 
make a purchase. 

So do I edit my files on my 
computer and then transfer them each 
time I want to update my site? 


Yes, for small sites, that is normally 
the way you do things. Use your computer to 
test your changes and make sure things are 
working the way you want before transferring 
your files to the server. For larger websites, 
organizations often create a test site and a 
live site so that they can preview changes 
on the test site before they are moved to the 
live site. 

If you're using a tool like Dreamweaver 
or Coda, these tools will allow you to test 
your changes on your own computer, and 
then when you save your files, they are 
automatically transferred to the website. 


Can I edit my files directly on the 
web server? 

That usually isn’t a good idea because 
your visitors will see all your changes and 
errors before you have time to preview and 
fix them. 

That said, some hosting companies will allow 
you to log into the server and make changes 
on the server. To do that, you usually need 
to know your way around a DOS or Linux 
command prompt, depending on what kind 
of operating system your server is running. 


l"po^i3a?TTP a^lications 


===== 


Here are a few of the most popular FTP applications for Mac 
and Windows: 

For Mac OS X: 

■ Fetch (http://fetchsoftworks.com/) is one of the most popular 
FTP applications for Mac. $ 

Transmit (http://www.panic.com/transmit/). $ 

Cyberduck (http://cyberduck.ch/). FREE 
For Windows: 

■ Smart FTP (http://www.smartftp.com/download/). $ 

■ WS_FTP (http://www.wsftple.com/). FREE for the basic 
version, $ for the Pro version 

■ Cyberduck (http://cyberduck.ch/). FREE 


■ 


■ 


Most fTP 

"to 
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getting connected 


iff 


VO fry to af 



It’s another homework assignment for you (check each item as you do it): 

Make sure you know where your root folder is on the server at 
your hosting company. 

Figure out the best way (and the best tool to use) to transfer 
files from your computer to the server. 

For now, go ahead and transfer the Starbuzz “index.html” and 
“mission.html” files to the root folder of the server. 




End of Web Detour 


Pack to business 


That’s the end of the detour, and we’re back on the web 
superhighway. At this point, you should have the two 
Starbuzz pages, “index.html” and “mission.html”，sitting 
under your root folder on a server (or if not, you’re at least 
following along). 

After all this work, wouldn’t it be satisfying to 
make your browser retrieve those pages over 
the Internet and display them for you? Let’s 
figure out the right address to type into your 
browser … 


l/Veb page addv-csscs s-bv-t 
with h-ttp. I/Vcll look ih-to 

\v\ a scd. 





www.starbuzzcoffeexom 


http:// 


.starbuzzeoffee.com / index.html 


p oV - 七 he v-oo-t *foldcv- f[Y\d hevVs 七 he 
ttcvVs the website Mmc. ； uS *t use 、、/、、， page -filename. 
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uniform resource locators 

Maiwstreet, 


You’ve probably heard the familiar “h” “t” “t” “p” “colon” 
“slash” “slash” a zillion times, but what does it mean? First of 
all, the web addresses you type into the browser are called 
URLs or Uniform Resource Locators. 


If it were up to us, we would have called them “web addresses, 
but no one asked, so we’re stuck with Uniform Resource 
Locators. Here’s how to decipher a URL: 




http : //www. starbuzzcof fee. com/index. html 

V — V 一 〆 


TKc pav-*t o( 
-tKc URL tells you 

proiodol 

r>ccds *to be used 
v-c*tv*icvc *thc 
vcsouvdc- 


The sctoY\d fav-t is 
the v/cbsi*tc 
A*t this po'mt you 
k^ow all about -that- 


A^d the ihi\rd part is 
ihc absoLtc^paih -to 
"the \rcsou\rdc TVorw 
v-ooi -foldcv-. 


the 


To locate anything on the Web, as long as you know the server 
that hosts it, and an absolute path to the resource, you can create 
a URL and most likely get a web browser to retrieve it for you 
using some protocol — usually HTTP. 



A Uniform Resource 
Locator (URL) is 

a g lolial aJetre ss 
tkat can Le used to 


locate anytliingf on 
tke Wel>，inctuctingf 

HTML pages, audio ， 

video, and many otker 
forms of wel> content. 


In addition to 
specifying tke location 
of tke resource, a 
URL also names tke 
protocol tkat you can 
use to retrieve tkat 


resource. 
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What is HTTP? 

HTTP is also known as the HyperText Transfer Protocol. In other words, 
it’s an agreed-upon method (a protocol) for transferring hypertext 
documents around the Web. While “hypertext documents” are usually 
just HTML pages, the protocol can also be used to transfer images, or 
any other file that a web page might need. 

HTTP is a simple request and response protocol. Here’s how it works: 




HTTP request ： could I please have 
the file /index.html? 



HTTP response ： I found 
that file; here it is. — 


www.starbuzzcoffee.com 


So each time you type a URL into your browser’s address bar, the 
browser asks the server for the corresponding resource using the HTTP 
protocol. If the server finds the resource, it returns it to the browser and 
the browser displays it. What happens if the server doesn’t find it? 



HTTP request ： could I please have 
the file /hardtofind.html? 




HTTP response ： error 
#404; I cant find it . 、 


www.starbuzzcoffee.com 


If the resource can’t be found, you’ll get the familiar “404 Error,” 
which the server reports back to your browser. 
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absolute paths to your files 


Whafs aw absolute path? 

The last time we talked about paths, we were writing HTML to make links with 
the <a> element. The path we’re going to look at now is the absolute path part 
of a URL, the last part that comes after the protocol (http) and the website name 

(www• starbuzzcof fee . com). 

An absolute path tells the server how to get from your root folder to a particular 
page or file. Take Earl’s Autos site, for example. Say you want to look in Earl’s 
inventory to see if your new Mini Cooper has come in. To do that, you’ll need 
to figure out the absolute path to the file “inventory.html” that is in the “new” 
folder. All you have to do is trace through the folders, starting at the root, to get 
to the “new” folder where his “inventory.html” file is located. The path is made 
up of all the folders you go through to get there. 

So, that looks like root (we represent root with a “/’’) ， “cars” ， “new”，and finally, 
the file itself, “inventory.html”. Here’s how you put that all together: 


Always Au-tos 

at the root { rooi 



Absolute path -to 




/cars/new/inventory.html 
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tJiereiare no ^ 

Dumb Questi9ns 


What is important about the 
absolute path? 

The absolute path is what a server 
needs to locate the file you are requesting. 
If the server didn’t have an absolute path, it 
wouldn’t know where to look. 

I feel like I understand the pieces 
(protocols, servers, websites, and 
absolute paths), but I’m having trouble 
connecting them. 


If you add all those things together, 
you have a URL, and with a URL you can 
ask a browser to retrieve a page (or other 
kinds of resources) from the Web. How? The 
protocol part tells the browser the method 
it should use to retrieve the resource (in 
most cases, this is HTTP). The website 
part (which consists of the server name and 
the domain name) tells the browser which 
computer on the Internet to get the resource 
from. And the absolute path tells the server 
what page you're after. 

We learned to put relative paths 
in the href attribute of our <a> elements. 
How can the server find those links if 
they aren’t absolute? 


Wow, great question. When you click 
on a link that is relative, behind the scenes 
the browser creates an absolute path out of 
that relative path and the path of the page 
that you click on. So, all the web server ever 
sees are absolute paths, thanks to your 
browser. 

Would it help the browser if I put 
absolute paths in my HTML? 

Ah, another good question, but hold 
that thought—we’ll get back to that in a sec. 


^Jharpen your penci 

You 


You’ve waited long enough. It’s time to give your new URL a spin. Before you do, fill 
in the blanks below and then type in the URL (like you haven’t already). If you’re 
having any problems, this is the time to work with your hosting company to get 
things sorted out. If you haven’t set up an hosting company, fill in the blanks for 
www.starbuzzcoffee.com, and type the URL into your browser anyway. 


:// 


protocol 


website name 


absolute path 
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easier urls 


rd like my visitors to be able to type 
、、 http://www.starbuzzcoffee.com" and 
not have to type the ''index.html〃. Is 
there a way to do that? 


O 





Yes, there is. One thing we haven’t talked about is what 
happens if a browser asks for a directory rather than a file 
from a web server. For instance, a browser might ask for: 

http : //www.starbuzzcoffee.com/images/ 


or 

http : //www.starbuzzcoffee.com/ 


Rcwcwkcv-, vc 

^alkmoy abou 七从 V) 

or f TP, ^ usual>7 use tht 

'^ stc , ad 

of But 如 7 代 

代铣 c same tWm 汐 




TV images div-cd-tovy 
七 VOO 七 div-cd-tovy 

T^c \roo 七 di\TC^-to\ry itscl-f 


When a web server receives a request like this, it tries to 
locate a default file in that directory. Typically a default file is 
called “index.html” or “default.htm” and if the server finds 

one of these files, it returns the file to the browser to display. ^ ^ 0VA 七 

So, to return a file by default from your root directory (or 

any other directory), just name the file “index.html” or i- x. ou -to '/o^ 

default.htm”. 八 、/ We, Wtause 

ok 



ov> 


But I asked about 
u http ： //www.starbuzzcoffee.com ,, / 
which looks a little different. It 
doesn’t have the ending V”. 


Oops, you sure did. When a server receives a request like 
yours without the trailing and there is a directory with 
that name, then the server will add a trailing slash for you. 
So if the server gets a request for: 

http : //www.starbuzzcoffee.com 

it will change it to: 

http : //www.starbuzzcoffee.com/ 

which will cause the server to look for a default file, and in 
the end it will return the file as if you’d originally typed: 
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How default pages work 


getting connected 




o The user types 

http://www.starbuzzcoffee.com/drinks/ 




into the browser. 


❹ Server locates a default 
called M index.htmr , in 
the drinks directory. 


o The server says, ''That looks 
like a directory; is there a 
default file in that directory?" 


www.starbuzzcoffee.com 


❽ HTTP request ： could I please 
have the file ''/drinks/ 1 ? 


HTTP response ： you asked for 
a directory, but I found ''index, 
html" in that directory, so thafs 
what rm sending back. 


So anyone who comes to my site 
with the URL http://www.mysite.com is 
going to see my “index.html” page? 

Right. Or, possibly “default.htm” 
depending on which kind of web server your 
hosting company is using. (Note that “default 
htm” usually has no T on the end. This is a 
Microsoft web server oddity.) 


thereicire no ^ 

- Dumb Questi9ns 

There are other possible default filenames, 
like “index.php”, that come into play if you 
start writing scripts to generate your pages. 
That’s way beyond this book, but that doesn’t 
mean you won’t be doing it in the future. 

So when I’m giving someone my 
URL, is it better to include the 
“index.html” part or not? 


Not. It’s always better to leave it off. 
What if, in the future, you change to another 
web server and it uses another default file 
name like “default.htm ”？ Or you start writing 
scripts and use the name “index.php ”？ Then 
the URL you originally gave out would no 
longer be valid. 
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practicing with paths 



Earl needs a little help with his URLs 

Earl may know Earl, but he doesn’t know U-R-L. He needs a little help figuring out the 
URL for each of the files below, labeled A, B, C, D, and E. On the right, write in the 
URL needed to retrieve each corresponding file from www.earlsautos.com. 


仨 avl 、 v 。。 七 -foldcv 


<html> 


</html> 


earls a 


utos 


Vi 


index.html 




<html> 


</html> 


directions.html 



o 



element.gif 


<html> 


</html> 


index.html 



inventory.html 



thunderbird.gif 


1001 D| 

W\o\o(\ 

ooloiol 

loiomj 

mustang.gif 
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^/v’rbc 七 he WRL hcvc. 





e n o 

Earls Autos 

. ， 叫丨 cJW 




BOO 


Earls Autos 



❾ 


0 O O Earls Autos 

: m @ s 
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linking to other web pages 


Fantastic! Were 
up and running on the 
Web. I’m already hearing 
great buzz about our site 
in the stores. 


O 


Q 


By the way, we’ve got a 
new caffeine awareness 
program ； we figure if were going to be 
pumping people full of caffeine, we want them 
to know how to take it to the limit. Can we point 
people to the caffeine information over on 
wickedlysmart.com/buzz from our site? 


How do we link to other websites? 


URLs aren’t just for typing into browsers; you can use them right in your 
HTML. And, of course, right on cue, the Starbuzz CEO has a new task 
for you: make a link from the main Starbuzz page over to the caffeine 
information at http : / /wickedlysmart. com/buzz. As you can probably 
guess, we’re going to throw that URL right into an <a> element. Here’s 
how: 


<a href= f! http: //wickedlysmart, com/buzz T! >Caffeine Buzz</a> 


〜 cve^daY ， 

-肅吻 <a> 



Wlc’ve pu*t a URL -the Wc-f. Clidkmg -the label w Ca-f-fc*mc 

will \rctv-icvc d -fv-orw y/i^kcdlysmav-t dom/buzi. 



That’s all there is to it. To link to any resource on the Web, all you need is its 
Uniform Resource Locator, which goes in the <a> element as the value of the 
href attribute. Let’s go ahead and add this in the Starbuzz “index.html” page. 
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Linking to Caffciwe Puzz 

Open your Starbuzz “index.html’’ file in the u chapter4 / starbuzz’’ folder, and scan down to 
the bottom. Let’s add two new links: a relative link to the mission statement in 
“mission.html”，and a link to Caffeine Buzz. Make the changes below，then save and load 
your “index.html” file in your browser. Click on the link and enjoy the Caffeine Buzz. 


<html> 

<head> 

<title>Starbuz z Coffee</ title> 

<style type= n text/css M > 

body { 

background-color : #d2b48c; 
margin-left : 20%; 
margin-right : 20%; 
border : 2px dotted black; 
padding : lOpx lOpx 1Opx lOpx; 
font-family: sans-serif; 

} 

</style> 

</head> 


<body> 

<hl>Starbuzz Coffee Beverages</hl> 

<h2>House Blend, $1.49</h2> 

<p>A smooth, mild blend of coffees from Mexico, 
Bolivia and Guatemala. </p> 

<h2>Mocha Cafe Latte, $2.35</h2> 

<p>Espresso, steamed milk and chocolate syrup. </p> 


<h2>Cappuccino, $1.8 9</h2> 

<p>A mixture of espresso, steamed milk and foam. </p> 

<h2>Chai Tea, $1.85</h2> 

<p>A spicy drink made with black tea, spices, s , ^\\\s uses 3 


milk and honey. 


</p> 

<p> 




a 


<a href= n mission.html">Read about our Mission</a>. 
<br> 


\A/c added 

Vmk 


<W> 


: s W 

一 VmCS. 


Read the <a href= n http://wickedlysmart.com/buzz ">Caffeine Buzz</a>. 
</p> 


</body> 

</html> 




wc vc sdded sor»»c 乙七 
by giroupihg the lihks 
七以七 ih*to S 


added ihe Uk 匕 
如吐吟略 tWbuz 


P 吵 . 
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testing those links 


Awd wow for the test drive. 


Weve s the page With -the 
^cw Imk, jus-t as we plahhed. 


« o o 


Starbuzz Coffee 


|,| ► ] I + |0file:///chapter4/starbuzz/index.html 







Starbuzz Coffee Beverages 

House Blend, $1.49 

A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala. 

Mocha Cafe Latte, $2.35 

Espresso, steamed milk and chocolate syrup. 

Cappuccino, $1.89 

A mixture of espresso, steamed milk and foam. 

i Chai Tea ， $1.85 

i A spicy drink made with black tea, spices, milk and honey. 

i Rftad about our Mission. 

j Read the Caffeine Buzz . 


ttev-c s "the Imk. wc only 

linked the v/ov*ds w C«l-f-Pci^c Buzz/’ 
so i*t looks a Irttle 七 Ott\ 

七 he othev Imk. 




+ ' t! <>V/w 1 C l<Mty sm<lacom/b ^' rSt ^ 汗仙 * BUM 




Buzz 

your caffeine resources wiclc«Uy smm 、 


Sources 


f[Y\d you dlidk oy\ the Imk, 
youv* bv"ov/scv will make 扣 HTTP 
V-C<\ucs*b *to widkcdlysmairt tom/ 
buz<z> display the result 


and toa,esse. degr ee between : :T== S 

^Tshg^se^ng feToTnsomOoTd t0 ^ 10 ° ^ ，n 


process 


一 caffeine con;: : 她， 

Tea <^=0=1^ |=^=阳卜 邮叫她 res 

psually about half as much deoZZ than coffee. 

br h ew ). th ough certain types'o? tea Stren 帥 0 f ㈣ 

c^ong smoked teas, and oo,on 9 ccZnZ^ZlT 




as cola. Such 
to 50 ma of caffeine 


per 
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Dumb Quest! 


9ns 


At Caffeine Buzz, we use 
relative links to other pages on 
our site, and URLs to link offsite, like 
www.caffeineanonymous.com. 



It seems like there are two ways 
to link to pages now: relative paths 
and URLs. 

Relative paths can only be used 
to link to pages within the same website, 
while URLs are typically used to link to 
other websites. 

Wouldn’t it be easier if I just 
stuck with URLs for links to my own 
pages and outside pages? That would 
work, wouldn’t it? 

Sure, it would work, but there's 
a couple of reasons you don’t want to 
go there. One problem is that URLs 
are hard to manage when you have a 
lot of them in a web page: they’re long, 
difficult to edit, and they make HTML 
more difficult to read (for you, the page 
author). 

Also, if you have a site with nothing 
but URLs that link to local pages and 
you move the site or change its name, 
you have to go change all those URLs 
to reflect the new location. If you use 
relative paths, as long as your pages 
stay in the same set of folders—because 
the links are all relative—you don’t 
have to make any changes to your <a> 
element href attributes. 

So, use relative links to link to your own 
pages in the same site, and URLs to link 
to pages at other sites. 

Haven’t we seen one other 
protocol? I kept seeing “file:///” 
before we started using a web server. 


Yes; good catch. The file protocol 
is used when the browser is reading files 
right off your computer. For example, 
the file URL, “file:///chapter4/starbuzz/ 
index.html”, tells the browser that the file 
“index.html” is located at the path 
7chapter4/starbuzz/". This path may look 
different depending on your operating 
system and browser. 

One important thing to notice in case 
you try to type in a file URL is that the 
file URL has three slashes, not two, like 
HTTP. Remember it this way: if you take 
an HTTP URL and delete the website 
name you'll have three slashes, too. 

Are there other protocols? 

Yes, many browsers can support 
retrieval of pages with the FTP protocol, 
and there is a mail protocol that can 
send data via email. HTTP is the 
protocol you’ll be using most of the time. 

Q/ I’ve seen URLs that look like 
this: http://www.mydomain.com:8000/ 
index.html. Why is there a “:8000” in 
there? 

The “:8000” is an optional “port” 
that you can put in an HTTP URL. Think 
of a port like this: the website name 
is like an address, and the port is like 
a mailbox number at an address (say, 
in an apartment complex). Normally 
everything on the Web is delivered to a 
default port (which is 80), but sometimes 
web servers are configured to receive 
requests at a different port (like 8000). 
You'll most likely see this on test servers. 
Regular web servers almost always 
accept requests on port 80. If you don’t 
specify a port, it defaults to 80. 
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time for a small mystery 


The Case of Relatives and Absolutes 


Flye^lnute 

Mystery 



PlanetRobots, Inc., faced with the task of developing a website 
for each of its two company divisions — PlanetRobot Home and 
PlanetRobot Garden — decided to contract with two firms to get 
the work done. RadWebDesign, a seemingly experienced firm, took 
on the Home division’s website and proceeded to write the site’s 
internal links using only URLs (after all, they’re more complicated, 
so they must be better). A less experienced, but well-schooled 
firm, CorrectWebDesign, was tasked with PlanetRobot^ Garden 
site, and used relative paths for links between all the pages within 
the site. 


Just as both projects neared completion, PlanetRobots called with 
an urgent message: “We’ve been sued for trademark infringement, so 
we’re changing our domain name to RobotsRUs. Our new web server 
is going to be www. robotsrus . com.” GorrectWebDesign made a 
couple of small changes that took all of five minutes and was ready 
for the site’s unveiling at the RobotsRUs corporate headquarters. 
RadWebDesign, on the other hand, worked until 4 a.m. to fix their 
pages but luckily completed the work just in time for the unveiling. 
However, during a demo at the unveiling, the horror of horrors 
occurred: as the team leader for RadWebDesign demonstrated 
the site, he clicked on a link that resulted in a “404 — Page Not 


Found” error. Displeased, the GEO of RobotsRUs suggested that 
RadWebDesign might want to consider changing their name to 
BadWebDesign and asked GorrectWebDesign if they were available 
to consult on fixing the Home site. 


What happened? How did RadWebDesign flub things 
up so badly when all that changed was the name of 
the web server? 
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Web page fit and finish 

Gan you say “web career ”？ You’ve certainly delivered everything the 
Starbuzz CEO has asked for, and you’ve now got a high-profile website 
under your belt (and in your portfolio). 


But you’re not going to stop there. You want your websites to have that 
professional “fit and finish” that makes good sites into great ones. You’re 
going to see lots of ways to give your sites that extra “polish” in the rest of 
this book, but let’s start here with a way to improve your links. 

Improving accessibility by adding a title to your links 

Wouldn’t it be nice if there were a way to get more information about the link 
you’re about to click on? This is especially important for the visually impaired 
using screen readers because they often don’t want the entire URL spoken to 
them: (“h” “t” “t” p” “：” “slash” “slash” “w” “w” “w” “dot”)，and yet the link’s 
label usually only gives a limited description, like “Caffeine Buzz.” 


The <a> element has an attribute called title just for this purpose. Some 
people are confused by this attribute name because there’s an element named 
<title> that goes in the <head>. They have the same name because they are 
related — it is often suggested that the value of the title attribute be the same 
as value of the <title> element of the web page you are linking to. But that 
isn’t a requirement and often it makes more sense to provide your own, more 
relevant description in the title attribute. 

Here’s how you add a title attribute to the <a> element: 

Read the <a href="http : //wickedlysmart.com/buzz M 

title= n Read all about caffeine on the Buzz M >Caffeine Buzz</a> 

t 

The title has a value -that is a textual 

dcs^\rip*tioir\ o-f *bhc you -to. 



Now that we’ve got a title attribute, let’s see how your visitors would make use of it. Different 
browsers make different use of the title, but many display a tool tip. Add the changes above to 
your "index.html" file and reload the page to see how it works in your browser. 
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best practices for your links 


The title test drive... 


For most browsers, the title is displayed 
as a tool tip when you pass the mouse 
over a link. Remember that browsers 
for the visually impaired may read the 
link title aloud to a visitor. 


TKc is displayed 
as a *tool 七 m 州從七 
bvov/scv*s. v)uS 七 
'youv w\ousc ovcv* 

Uk and hold ’rt 七 
a sc£-oy\d *bo see 七 he 
七 ool 七中 .- 


« o o 

Starbuzz Coffee 



◄ 

► + 

file:///chapter4/starbuzz/index.html 

c JqT~ 

1\ 




Starbuzz Coffee Beverages 

House Blend, $1.49 

A smooth, mild blend of coffees from Mexico, Bolivia and 
Guatemala. 

Mocha Cafe Latte, $2.35 

Espresso, steamed milk and chocolate syrup. 

Cappuccino, $1.89 

A mixture of espresso, steamed milk and foam. 

Chai Tea, $1.85 

A spicy drink made with black tea, spices, milk and honey. 

Read about our Mission. 

Read the Caffeine B^jzz. 


Read all about caffeine on the 


Buzzj 


Go to "http://buzz.wickedlysmart.com/” 




Jhst Cjiiile to (Bettel J^tnlcs 

J^ele au a few tips to keep in mind to falthel improve the Jit and finish ofyoallinks: 




J(eep youl link laLeL concise. 2)on t make enthe sentences ol lalge pieces of text into links. 3n 
genelal，keep them to a few wolds. Plovide additional information in the title atkiLute. 

J(eep yoal link laLels meaningful, flevel use link laLels like ^click h&it ol ^tkis page.” Vsels tend 

^ 麵 / links fast, and then lead pages second. So, ploviding meaningfal links improves 

j usa ^ Lt y°J youl page. %st yoM pageloy leading just the links on it; do they make sense? Ol 
yoa need to lead the text alound them 1 


U J placing links light next to each otU; usels Lve tloaUe distinguishing between links that 
placed closely togetheY. 


ale 
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getting connected 


E^gctSd 


Open your Starbuzz “index.html” file and add a title to the link to "mission.html" with the text 
“Read more about Starbuzz Coffee’s important mission.” Notice that we didn’t make the mission 
link’s label as concise as it should be. Shorten the link label to “our Mission ■” Check the back of 
the chapter for the answer, and test your changes. 


Great job on the links, 
rd really like for people to link 
directly to the coffee section of 
the Buzz site. Is that possible? 


Head First Caffeir>e Buzz 


O 


0 



Unking mto a page 


So far, whenever you’ve linked to another page, the page loads 
and your browser displays it from the top. 

But the CEO’s asking you to link into a particular spot in the page: 
the Coffee section. 

Sound impossible? Gome on, this is Head First — we’ve got the 
technology. How? Well, we haven’t told you everything about the 
<a> element yet. Turns out the <a> element can team up with the 
id attribute to take you straight to a specific point in a page. 


+ //wicltfdty^rnaa rom/hu/y/ 


Caffeine Buzz 

your caffeine reaource^ wlckedlysmart 


Sources 

One common source of caffeine is the coffee plant, the beans 
from which are used to produce coffee. Caffeine content varies 
substantially between Arabica and Robusta species and to a 
lesser degree between varieties of each species. 

One dose of caffeine is generally considered to be 100 mg In 
th^pry. a single serving (6 fl 02 /150 ml) of drip coffee or one-half 
caffeine tablet would deliver this dose. In the real world, coffee 
vanes considerably in caffeine content per serving, ranging from 
about 75 mg to 250 mg. Generally, darlc roast coffee has less 
caffeine than lighter roasts since the roasting process reduces 
caffeine content of the bean. 

Tea is another common source of caffeine in many cultures. Tea 
contains somewhat less caffeine per serving than coffee, (usually 
about half as much, depending on the strength of the brew), 
though certain types of tea, such as Lapsang sou chong smoked 
teas, and oolong contain more caffeine. 

Caffeine is also common in soft drinks such as cola. Such drinks 
typically contain about 25 mg to 50 mg of caffeine per serving 
Some "energy drinks'* such as Red Bull contain 60 mg. while 

oWer considerably more caffeine per serving, from 100 mg 

Mateine and guaranine are other names for caffeine. The 
names come from yerba matd and guarana respectively, 
caffeine-containing plants used for tea and other things. Many 
yerb 〒 mat6 enthusiasts insist that mateine is a stereoisomer of 
caffeine and thus a different substance altogether. However, this 
is impossible; caffeine is an achiral molecule with no chiral 
centers, and therefore has no stereoisomers. Similar claims are 
sometimes made of guaranine. 

Caffeine is sometimes called theine when it is found in tea, as 
the caffeine in tea was or>ce thought to be a separate compound 
to the caffeine fourvd in coffee. But tea does contain another 
xanthine, theophylline whose chemical structure is C 7 H 8 N 4 O 2 
compared to caffeine's This is similar to the naming 

problem with mateine and guaranine. 


Coffee 

A ” ^uid ounces are U S. fluid ounces. 

• Coffee, brewed (drip) • 4 to 20 mg/floz (130 to 680 mq/litre) 
(40 to 170 mg/5 floz) 

• Coffee * decaffeinated • 0.4 to 0.6 mg/floz (13 to 20 mg^itre) 

• Coffee, instant - 4 to 12 mg/floz (130 to 400 mg/litre) 

• Espresso Arabica - —40 mg/floz (1360 mg/litrd) 

• Espresso Robusta • -100 mg/floz (3400 mg/litre> 

Teas and other infusions 
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creating destinations 


Using the id attribute to create a destination for <a> 


We haven’t talked about the id attribute yet; it’s an important attribute with special 
properties, and we’ll get into more detail about other special properties of id later 
in the book. For now, think of it as a way of uniquely identifying an element. One 
special property that elements with ids get is that you can link to them. Let’s see 
how to use the id attribute to create a destination in a page for <a>. 

Find the location in the page where you’d like to 
create a landing spot. This can be any text on the 
page, but often is just a heading. 

Choose an identifier name for the destination, like 
“coffee” or “summary” or “bio,” and insert an id 
attribute into the opening tag of the element. 

Let’s give it a try. Say you want to provide a way to link to the Ghai Tea item on 
the Starbuzz page. Here’s what it looks like now: 

<h2>Chai Tea, $1.85</h2> 

<p>A spicy drink made with black tea, spices, milk 
and honey. </p> 


Wcrts *tKc snippet 

v/rth 七 he 
av\d dcsdv*iftiov\. 


o 

❹ 


Following the two steps above, we get this: 


Add id *to i\\t 


v/cll jive -this 
dcstmatio^ 


Its imfovwc your 

id be ur>i^ug- 'tKc 

w tKai w id mus 七 be 七 he o 灼 ly 
w tKai w id \ y \ *tKc 


<h2 id= n chai n >Chai Tea, $1. 85</h2> 

<p>A spicy drink made with black tea 
honey. </p> 


spices, milk and 



By i*t 3 ^ you vc w» 3 dc 3 

dcstm^o^ ou*t o-f Chai Tia 
m *tKc w mde% ivW’’ 
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getting connected 


How to link to elements with ids 

You already know how to link to pages using either relative links or URLs. In 
either case, to link to a specific destination in a page, just add a # on the end of 
your link, followed by the destination identifier. So if you wanted to link from 
any Starbuzz Coffee web page to the “chai” destination heading, you’d write 
your <a> element link this: 


<a href="index.html#chai">See Chai Tea</a> 


Unfortunately, linking to Chai Tea isn’t very impressive because the 
whole page is small enough that it easily fits in the browser. Let’s link 
to the Coffee section of http : / /wickedlysmart. com/buzz instead. 
Here’s what you’re going to do: 

❶ Figure out the id of the Coffee heading. 




o Alter the existing <a> element in the Starbuzz Coffee 
“index.html” file to point to the destination heading. 



Reload your “index.html” page and test out the link. 


Finding the destination heading 

To find the destination heading, you’re going to have 
to look at the wickedlysmart. com/buzz page and 
view their HTML. How? Almost all browsers have a 
“View Source” option. So, visit the page and when it 
is fully loaded, choose the “View Source” option, and 
you’ll see the markup for the page. 


I 灼 mos*t bv-owsev-s, you 

vi# 七- di 匕 k *to 'View Souv 匕 c.” 


A O O 





Sources 

Back 

?rZ of caffeine i S 二 bo&rd 

— p . 


- - 二〜一 caffeine is 

substantially between Ara^cS^nc 1 * 
lesser degree between varieties o 


Save Page As 
Print Page... 


5ans 
/aries 
I a 


""u rage … 

theo^a^n iS 9enerally « Inspect Element n . 

varies considerably in caffe ^ ； the rea, wor,d - co ^e 
about 76 mg to 2b0 mg. General ^'° 9 ' ran 9 in 9 from 
caffeine than lighter roasts since ⑽ r ° aS1 °° 的 ® has less 
caffeine content of the bean . 奶 roast,n 9 Process reduces 


0 
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linking to a destination 


Now that you've got your hands on their HTML... 


Scroll down until you see the Coffee section; it looks like this: Jus 七 a small sr/iffe 七 -fvom 

i\\t CaWcmc Buzz, pa^c- 


This is similar to the naming problem 
with <b>mateine</b> and <b>guaranine</b>. 

</p> 


<h3 id= n Coffee">Coffee</h3> 
<P> 


<i>All fluid ounces are U.S. fluid ounces . </i> 
</p> 


rou 



Hcv-c's i\\t Co^tt 
see *biic V^cadm^ (or i*b alo^ 5 如必 

stavb i\^t pa^rajva^ below. 


dhd hcv~c is -the 

dcstihatioh hcadiha. H has 
"the ''Co-Pfcc^. 


Reworking the link w "index.html" 

Now all you need to do is revisit the link to Caffeine Buzz 
and add on the destination anchor name, like this: 

The dc-faul-t -file at 


This is d snippet 
S*ta\rbuzi -file- 



widkcdlysrnoivt.donf»/bu22. is 
•mdex.lvtrwl. So, well add tha 七 
■fco the URL so wc C^v\ use it 
with -the desiiirtaiio^ id- 




Add 养 aloyv^ Wrth 
i\\t dcstma*&cm id 
-to youv Kv-c-f- 


Read the <a href= n http : //wickedlysmart.com/buzz/index.html#Coffee" 

title="Read all about caffeine on the Buzz n >Caf feine Buzz</a> 



Make this change to your Starbuzz “index.html” file. 
Reload and click on the “Caffeine Buzz” link. You 
should be taken directly to the Coffee section of 
Caffeine Buzz’s front page. 
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When I have two attributes in an 
element, is the order important? For 
example, should the title attribute always 
come after the href? 

The order of attributes is not important 
in any element (if it were, we'd all have 
headaches 24/7). So, use any ordering you 
like. 

How would I create a tool tip for an 
element that’s not an <a>? 

You can add the title attribute to any 
element, so if you want a tool tip on, say, a 
heading, you can add a title attribute to your 
<h1> opening tag just like we did with <a>. 
There are a few elements that use the title 
attribute for more than just a tool tip, but the 
tool tip is its most common purpose. 

Can I add an id attribute to any 
element? 

Yes, you can. You could link into the 
middle of a paragraph by adding an id to an 
<em> element, for instance. It’s unlikely that 
you’ll often need to do that, but you can do it 
if you want. 

Could I link to a link by adding 
an id attribute to an <a> element in the 
destination? 

Yes! 

I noticed in the id names, you 
used “chai” with all lowercase letters 
and Caffeine Buzz used “Coffee” with an 
uppercase “C”. Does it matter? 


tJiereiare no ^ 

Dumb Questi9ns 


You can use any combination of 
upper- and lowercase characters in your 
id attributes. Just make sure you are 
consistent and always use the same upper- 
and lowercase letters in your hrefs and 
destination id (which is why it is often easier 
to make these names entirely lowercase 
every time). If you aren’t consistent, don’t 
expect your links to work correctly on every 
browser. The most important thing about the 
id name you choose is that it must be unique 
in your page. 

Can I put a link to a destination 
from within the same document? 

Sure. In fact, it is common to define a 
destination “top” at the top of a page (say, on 
the top heading of the page) and have a link 
at the bottom of the page reading “Back to 
top.” It is also common in long documents to 
have a table of contents for the entire page. 
For instance, to link to the “top” destination 
heading in the same page, you would write 
<a href=”#top’’>Back to top</a>. 

Why did we need to add the “/index, 
html” to the Buzz URL in order to create a 
link to the destination heading? Couldn’t 
we have just written: 
http://wickedlysmart.eom/buzz#Coffee? 

No, that won’t always work because 
the browser adds that trailing slash on the 
end of the URL for you, which could end 
up replacing the id reference. You could, 
however, have written: 
http://wickedlysmart.eom/buzz/#Coffee, 
which will produce the same results as the 
link we created using “index.html”. This 
will come in handy if you don’t know if the 
default file is named “index.htmr 


If a web page doesn’t provide a 
destination and I still need to link to a 
specific part of the page, how can I? 

You can't. If there is no destination (in 
other words, no element with an id), then you 
can’t direct the browser to go to a specific 
location in a web page. You might try to 
contact the page author and ask them to add 
one (even better, tell them how!). 

Can I have a destination id like 
“Jedi Mindtrick” or does an id have to be 
only one word? 

To work consistently with the most 
browsers, always start your id with a letter 
(A-Z or a-z) and follow it with any letter, 
digit, hyphen, underscore, colon, or period. 
So, while you can't use a space and have a 
name like “Jedi Mindtrick”，that isn’t much 
of a restriction because you can always 
have “Jedi-Mindtrick” ， “Jedi_Mindtrick ”， 
“JediMindtrick”，and so on. 

How can I tell others what 
destinations they can link to? 

There is no established way of doing 
this, and in fact, “View Source" remains the 
oldest and best technique for discovering the 
destinations you can link to. 

Do I always use just words as the 
content of an <a> element? 

No. The <a> element has always been 
able to create links from words and images 
(inline content), and has recently been 
updated (in HTML5) so that you can create 
links from block elements, like <p> and 
<blockquote> too! So <a> can be used to 
create links from all kinds of things. 
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case solved: it’s all about relative and absolute 


The Case of Relatives and Absolutes 


So, how did RadWebDesign flub up the demo? Well, 
because they used URLs for their hrefs instead of relative 
links, they had to edit and change every single link from 
http : / / www. planetrobots . com to http : / / www. 




Fjye^lnute 


robotsrus . com. Can you say error-prone? At 3:00 
a.m., someone yawned and accidentally typed 
http : // www. robotsru. com (and as fate has it, 
that was the same link that the CEO clicked on at 
the demo). 

GorrectWebDesign, on the other hand, used relative 
paths for all internal links. For example, the link from the 
company’s mission statement to the products page, 

<a href= M . . /products .html n >, works whether 


the site is called PlanetRobots or RobotsRUs. So, all 
GorrectWebDesign had to do was update the company 
name on a few pages. 


So RadWebDesign left the demo sleep-deprived and with 
a little egg on their face, while GorrectWebDesign left the 
meeting with even more business. But the story doesn’t end 
there. It turns out that RadWebDesign dropped by a little 
coffeehouse/bookstore after the demo and, determined not 
to be outdone, picked up a certain book on HTML and 
CSS. What happened? Join us in a few chapters for “The 
Case of Brute Force Versus Style.” 
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Awesome job linking to the Buzz site...I 
know I keep asking for changes, but really, this 
is the last one. Can you make the Buzz site come 
up in a separate window when I click on the link? I 
doiVt want the Starbuzz page to go away. 


Linking to a new window 

We have another new requirement from the 
Starbuzz CEO (there are always new requirements 
for websites). What he wants is this: when you click 
on the “Caffeine Buzz” link in the Starbuzz Coffee 
page, the Starbuzz Coffee page shouldn’t go away. 
Instead, a whole new window should open up with 
the Caffeine Buzz page in it, like this: 




« 0 0 

Starbuzz Coffee 



◄ ► 11 + 

^file:///chapter4/starbuzz/index.html 




Starbuzz Coffee Beverages 

House Blend, $1〆 


Will over to? 
of 七 k StavWzi ?乎 
W 七払 c Stavbuzi 
Will still be 七 ^. 


\ 


A rs 


Head First Caffeine Buzz 


ihe CBO 

is a whole 
hCw window io 

°P Ch you didk 
fthe Ca-Pfcihc 

Bu2i |i h k. 


A smooth, mild blend of cof 
Guatemala. 

Mocha Cafe Latte, 

Espresso, steamed milk ar 

Cappuccino, $1.89 

A mixture of espresso, ste£ 

Chai Tea, $1.85 

A spicy drink made with bU 

Read about our Mission. 

Read the Caffeine Buzz. 


I I + |0 http://wickeaiyswait.com/Ouzz/ 




Caffeme Bujuj: 

your caffeine resource ® wickedlysmart 




Sources 




One common source of caffeine is the coffee plant, the beans from which 
are used to produce coffee. Caffeine content varies substantially between 
Arabica and Robusta species and to a lesser degree between varieties of 
each species. 

One dose of caffeine is generally considered to be 100 mg. In theory, a 
single serving (6 fl 02 /150 ml) of drip coffee or one-half caffeine tablet 
would deliver this dose. In the real world, coffee varies considerably in 
caffeine content per serving, ranging from about 75 mg to 250 mg. 
Generally, dark roast coffee has less caffeine than lighter roasts since the 
roasting process reduces caffeine content of the bean. 

Tea is another common source of caffeine in many cultures. Tea contains 
somewhat less caffeine per serving than coffee, (usually about half as 

mi irh Hon^nHinn nn thn ctrpnnth of tho hro\A/、thru mh rortain tvnno nf 
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targeting windows and tabs 


Opening a new window using target 

To open a page in a new window，you need to tell the browser the name of the window in 
which to open it. If you don’t tell the browser a specific window to use, the browser just opens 
the page in the same window. You can tell the browser to use a different window by adding a 
target attribute to the <a> element. The value of the target attribute tells the browser the 
u target window’’ for the page. If you use “_blank” for the target, the browser will always open a 
new window to display the page. Let’s take a closer look: 


<a target :’ 1 blank” href= n http : / /wickedlysmart. com/buzz" 



title= n Read all about caffeine on the Buzz Tf >Caf feine Buzz</a> 


TIk a 七 "tells "the b\rowsc\r 

■to opch ihc web page thoil is at -the m 
"the hv*c-P attvibuie. |<p is ho 

the” "the bvowsc\r opchs the li^k ih the 
wihdow. 1 ( the tavgcl is 
kows 饮 opchs the lihk m a hew window. 


tWei^e no ^ 

Dumb Questi9ns 


I’m getting a new tab instead of a new window. 
Am I doing something wrong? 




Open your Starbuzz “index, 
html” file. Add the target 
attribute to the <a> tag that 
links to the Caffeine Buzz 
page. Now give it a try—did 
you get a new window? 





Can you think of some advantages and 
some disadvantages to using the target 
attribute to open a page in a new window? 


No, you’re not. Most browsers now have a default 
setting to open new windows in a tab, rather than a 
whole new browser window, because that’s what users 
seem to prefer. But a new tab and a new window are 
really the same thing; it’s just that the tab shares the 
same window border as your original window. If you 
want to force a whole new window, most browsers have 
a way to do this through the preferences settings. 

What if I have more than one <a> element with 
a target? If there’s already a "_blank" new window 
open, will it open in the window that’s already open? 
Or will it open in a new “_blank” window? 

If you give the name “_blank” to the targets in 
all your <a> elements, then each link will open in a 
new blank window. However, this is a good question 
because it brings up an important point: you don’t 
actually have to name your target “_blank”_ If you give 
it another name, say, “coffee”, then all links with the 
target name “coffee” will open in the same window. The 
reason is that when you give your target a specific 
name, like “coffee”, you are really naming the new 
window that will be used to display the page at the link. 
“_blank” is a special case that tells the browser to always 
use a new window. 
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The Target Atoikutc 

This week’s interview: 

Using target considered bad? 


Head First ： Hello, Target! We’re so glad you could 
join us. 

Target ： I’m glad to be here. It’s nice to know you’re 
still interested in hearing about me. 

Head First ： Why do you say that? 

Target ： Well, to be honest, I’m not as popular as I 
used to be. 

Head First ： Why do you think that is? 

Target ： I think it’s because users want to be in 
control of when a window opens. They don’t always 
like new windows popping open at unexpected times. 

Head First: Well, it can be very confusing — we’ve 
had complaints from people who end up with so 
many windows on their screens, they can’t find the 
original page. 

Target ： But it’s not like it’s difficult to get rid of the 
windows.. .just click on the little close button. What’s 
so hard about that?! 

Head First ： True, but if users don’t know a new 
window has opened, then they can get confused. 
Sometimes the new window completely covers the 
old window and it’s hard to tell what’s happening. 

Target ： Well, browsers are getting better at this kind 
of thing. 

Head First: How so? 

Target ： Browsers often open external pages in a 
new tab, within the same browser window, rather 
than opening them in a brand-new window. 

Head First: Ah, yes, that would help because it 
will be a lot less confusing to see a new tab open, 
which the user can visit whenever they want. Unlike 
opening a new window, it isn’t so disorienting. 


Head First ： How does this help with screen readers 
though? 

Target ： You mean browsers used by the visually 
impaired? 

Head First: Right. Some screen readers play a 
sound when a new window opens, but others just 
ignore the new window completely, or else they jump 
right to the new window immediately. Either way, it’s 
gotta be confusing for someone who can’t see what’s 
going on. I have no idea how they are handling tabs. 

Target: [Sigh] Yeah, we just aren’t there yet in 
terms of providing good tools that meet everyone’s 
needs, especially the visually impaired. That said, we 
seem to need to have the ability to take the user to 
pages outside our own site, and many sites do that 
by opening another window (or tab, if the browser 
supports it). 

Head First ： Yup. We need you, but we need to get 
better about not confusing the user. 

Target ： I’m hoping the web standard and browser 
teams will make all this better. 

Head First ： I guess for now we’re just going to have 
to remember to use you when it’s appropriate, but 
to keep in mind those people who might be visually 
impaired and not overuse you. 

Target ： You got it. You’ve helped ease my burden a 
bit here; thanks for helping me get the word out! 

Head First ： Any time, Target! 
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a brain crossover 



HTMLcross 

Here are some mind benders for your left brain. 



Across 

1. Web address to a resource. 

3. A Mac FTP application. 

7. Unique name on the Web. 

8. The file you get when you ask for a directory. 

10. What are you supposed to send back from 
Webville? 

12. Top directory of your website. 

13. Protocol we’ve been using up until this chapter. 

16. People can scan these rather than reading text. 

17. Path from the root. 

18. Controls domain names. 

19. The file you get when you ask for a directory. 


Down 

2. Top directory of your website. 

4. Request/response protocol. 

5. Keep your link labels_. 

6. Attribute used to make an element into a 
destination. 

9. Earl sold these. 

11. Always use these kinds of links when linking to 
pages on the same server. 

14. Wrong way to pronounce URL 

15. Informative caffeine site. 
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BULLET POINTS - 

■ Typically the best way to get on the Web is 
to find a hosting company to host your web 
pages. 

■ A domain name is a unique name, like 
amazon.com or starbuzzcoffee.com, that is 
used to identify a site. 

■ A hosting company can create one or more 
web servers in your domain. Servers are 
often named “www”_ 

■ The nie Transfer Protocol (FTP) is a 
common means of transferring your web 
pages and content to a server. 

■ FTP applications, like Fetch for Mac or 
WS_FTP for Windows, can make using 
FTP easier by providing a graphical user 
interface. 

■ A URL is a Uniform Resource Locator, or 
web address, that can be used to identify 
any resource on the Web. 


■ You can use relative paths or URLs in 
your <a> element’s href attribute to link to 
other web pages. For other pages in your 
site, it's best to use relative paths, and use 
URLs for external links. 

■ Use the id attribute to create a destination 
in a page. Use# followed by a destination 
id to link to that location in a page. 

■ To help accessibility, use the title attribute 
to provide a description of the link in <a> 
elements. 

■ Use the target attribute to open a link in 
another browser window. Don’t forget that 
the target attribute can be problematic 
for users on a variety of devices and 
alternative browsers. 


■ A typical URL consists of a protocol, a 
website name, and an absolute path to the 
resource. 


■ 


■ 


■ 


HTTP is a request and response protocol 
used to transfer web pages between a web 
server and your browser. 

The file protocol is used by the browser to 
read pages from your computer. 

An absolute path is the path from the root 
folder to a file. 

“index.html” and “default.htm” are 
examples of default pages. If you specify 
a directory without a filename, the web 
server will look for a default page to return 
to the browser. 


Wait, wait! Before you 
go, we need our logo on 
the web page! Hello? Oh, I 
guess they ve already gone on 
to Chapter 5... 


O 


D 
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exercise solutions 


^harpen your pencil 


上货 . : // 

protocol 


You've waited long enough. It’s time to give your new URL a spin. 
Before you do, fill in the blanks below and then type in the URL 
(like you haven’t already). If you’re having any problems, this is the 
time to work with your hosting company to get things sorted out. If 
you haven’t set up an hosting company, fill in the blanks for www. 
starbuzzcoffee.com, and type the URL into your browser anyway. 







website name 


Y^)UV* wcbsi*tc hcvc- 


absolute path 
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getting connected 


Earl needs a little help with his URLs 


O 


©00 


Earls Autos 


C 


/ y/y/y/cavlsau-tos.dom/ 


o 


000 


Ear!s Autos 




K 七七 p://y/y/y/ca\rlsau*tos.dorw/dived 七 ions.li 七你 I 


❻ 


006 


Earls Autos 


C 


http://y/y/y/cav-lsau-tos.dom/davs/new/ 


o 


©00 


Earls Autos 


6 


❾ 


0O0 


Earls Autos 


6 



Solution 


/ wy/y/cavlsau-tos.dom/davs/uscd/mv/crrtovy.ii 七州 I 


K 七七 p://y/>wy/cav*lsau*tos.dom/davs/new/images/mmidoo^cv.gi-f 
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exercise solutions 


&efu：tSe 

&QLv*ao 


Add a title to the link to "mission.html" with the text “Read more about Starbuzz Coffee’s 
important mission ■” Notice that we didn’t make the mission link’s label as concise as it should be. 
Shorten the link label to “our Mission”. Here’s the solution; did you test your changes? 


<html> 

<head> 

<title>Starbuz z Coffee</ title> 

<style type= n text/css M > 

body { 

background-color : #d2b4 8c; 
margin-left : 20%; 
margin-right : 20%; 
border : lpx dotted gray; 
padding : lOpx lOpx lOpx lOpx; 
font-family : sans-serif; 

} 

</style> 

</head> 

<body> 

<hl>Starbuzz Coffee Beverages</hl> 

<h2>House Blend, $1.4 9</h2> 

<p>A smooth, mild blend of coffees from Mexico, 
Bolivia and Guatemala. </p> 

<h2>Mocha Cafe Latte, $2.35</h2> 

<p>Espresso, steamed milk and chocolate syrup. </p> 
<h2>Cappuccino, $1.8 9</h2> 

<p>A mixture of espresso, steamed milk and foam .</p> 


<h2>Chai Tea, $1.85</h2> 

<p>A spicy drink made with black tea, spices, 
milk and honey. 

</p> 

(=^ — 一 "" 〜— Move w Rcad abou*t w ou-tsidc *thc <a> clcrwcr\t 

Read about <a href= n mission.html" 

title="Read more about Starbuzz Coffee's important mission M >our Mission</a>. 

<br> 

Read the <a href="http : //wickedlysmart.com/buzz n 

title= n Read all about caffeine on the Buzz n >Caffeine Buzz</a>. 

</p> 

</body> 

</html> 


j\dA a 

{fi *bV\c 
misstov\ U. 
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5 adding images t9 youv pages 

Meeting the Media 

參 


Smile and say “cheese.” Actually, smile and say “gif,” “jpg,” or 

“png’ ’ 一 these are going to be your choices when “developing pictures” for the Web. In this 
chapter you’re going to learn all about adding your first media type to your pages: images. 

Got some digital photos you need to get online? No problem. Got a logo you need to get on 
your page? Got it covered. But before we get into all that, don’t you still need to be formally 
introduced to the <img> element? So sorry, we weren’t being rude; we just never saw the 
“right opening.” To make up for it, here’s an entire chapter devoted to <img>. By the end of 
the chapter you’re going to know all the ins and outs of how to use the <img> element and its 
attributes. You’re also going to see exactly how this little element causes the browser to do extra 
work to retrieve and display your images. 
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How the browser works with images 

Browsers handle <img> elements a little differently than other elements. 
Take an element like an <hl> or a <p>. When the browser sees these 
tags in a page, all it needs to do is display them. Pretty simple. But when 
a browser sees an <img> element, something very different happens: the 
browser has to retrieve the image before it can be displayed in a page. 

The best way to understand this is to look at an example. Let’s take a 
quick look back at the elixirs page from the Head First Lounge, which 
has four <img> elements: 〆 一 " 


yiour>9«/«kxif.html 






Our Elixirs 

Green Tea Cooler 




v Cltock rull or vttumiu &nd minenU. this elixir combines the 
bc*hhfiil benefits of grocn tea with a twbc of chamomile bk>s$o«m tnd 


Raspberry Icc Concentration 


'juice with lemon grass, ciaus peel and 
mschip«, ihli icy drink will mike your mind feel clear and chip. 

Blueberry Bliss Elixir 


<html> 

<head> 

<title>Head First Lounge Elixirs</title> 

</head> 

<body> 

<hl>Our Elixirs</hl> 

<h2>Green Tea Cooler</h2> 

<P> ■ 

<img src= M ../images/green.jpg n > 

Chock full of vitamins and minerals, this elixir combines 
the healthful benefits of green tea with a twist of chamomile 
blossoms and ginger root. 

</p> 

<h2>Raspberry Ice Concentration</h2> 

<p> 

<img src= M ../images/lightblue.jpg n > 

Combining raspberry juice with lemon grass, citrus peel and 
rosehips, this icy drink will make your mind feel clear and 
crisp. 

</p> 

<h2>Blueberry Bliss Elixir</h2> 

<p> 

<img src= M ../images/blue.jpg n > 

Blueberries and cherry essence mixed into a base of 
elderflower herb tea will put you in a relaxed state of 
bliss in no time. 

</p> 

<h2>Cranberry Antioxidant Blast</h2> 

<p> 

<img src= M ../images/red.jpg n > 

Wake up to the flavors of cranberry and hibiscus in 
this vitamin C rich elixir. 

</p> 

<P> 

<a href= n ../lounge.html ">Back to the Lounge</a> 

</p> 

</body> 

</html> 


J Bluctcmcs and dicny essence mixed into a base of cldcrflowcr 
\%csb tea will pui you in a relaxed uaic of bliM in no time. 

Cranberry Antioxidant Blast 


Wake up (o (be nuvors of cninbcny und hibecus i 
: rich clUlr. 


Dock \o tbc Lounge 




\ y \ tWis HTML- 
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Now let’s take a look behind the scenes and step through how the 
browser retrieves and displays this page when it is requested from 
http :// wickedlysmart.com/lounge/ : 

① First, the browser retrieves the file u dixir.html〃 from the server. 

bvov/scv- y/'mdo>w ； r>o 七 \rc*tv"icvcd yc*t* 


Behind 

ilie Scenes 





<head> I 

<html> U 
<head> 

<title>Head B 

First Lounge 

ElL\ii's</tide> ■ 

一 J 

一 

Page</title > 1 

</head> 



ya go 


Web Server 


browser 


② Next the browser reads the u dixir\html〃 file, displays it, and sees it 
has four images to retrieve. So, it needs to get each one from the web 
server, starting with xx green.jpg". 

The HTML fay is v-c*t\ricvcd, bu*t b\ro>wscv 
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how browsers load images 


③ Having just retrieved H green.jpg ,, / the browser displays it and then 
moves on to the next image ： ''lightblue.jpg". 




browser 


④ Now the browser has retrieved U lightblue.jpg ,, / so it displays that 
image and then moves on to the next image, U blue.jpg〃. This process 
continues for each image in the page. 



browser 
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adding images to your pages 


How images work 

Images are just images, right? Well, actually there are a zillion formats for 
images out there in the world, all with their own strengths and weaknesses. 

But luckily, only three of those formats are commonly used on the Web: 
JPEG, PNG, and GIF. The only tricky part is deciding which to use when. 

So, what are the differences among and ^IF? 



Use JPE& for photos and 
complex graphics 



m 


Use PN& or &IF for images with solid 
colors, logos, and geometric shapes. 


Works best for continuous 
tone images, like 
photographs. 

Can represent images with 
up to 16 million different 
colors. 

Is a “lossy” format 
because to reduce the file 
size, it throws away some 
information about the 
image. 

Does not support 
transparency. 

Files are smaller for more 
efficient web pages. 

No support for animation. 


PNG works best for images with a 
few solid colors, and images with 
lines, like logos, clip art, and small 
text in images. 

PNG can represent images with 
millions of different colors. PNG 
comes in three flavors: PNG-8, 
PNG-24, and PNG-32, depending 
on how many colors you need to 
represent. 

PNG compresses the file to reduce 
its size, but doesn’t throw anything 
way. So, it is a “lossless” format. 

Allows colors to be set to 
“transparent” so that anything 
underneath the image will show 
through. 

Files tend to be larger than their 
JPEG equivalents, but can be 
smaller or larger than GIF depending 
on the number of colors used. 


Like PNG, GIF works best 
for images with a few solid 
colors, and images with 
lines, like logos, clip art, 
and small text in images. 

GIF can represent images 
with up to 256 different 
colors. 

GIF is also a “lossless” 
format. 

GIF also supports 
transparency, but allows 
only one color to be set to 
“transparent.” 

Files tend to be larger than 
their JPEG equivalents. 

Supports animation. 
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differences between gif, jpg, and png 



Wowy 1 the vcstl image ^lestsc up? 

This week’s interview: Image formats mix it up 


Head First ： Well, hello everyone. I think this might be 
the first time we’ve interviewed three interviewees at once! 

JPEG ： Hey there, and hey to GIF and PNG. 

GIF: I m not sure why I have to share the interview 
couch with these other bozos. Everyone knows GIF is the 
original image format of the Web. 

JPEG ： Ha! As soon as you get good at representing 
complex images, like photos, maybe then people will take 
you seriously again, but I’m not sure how you’re going to 
do that with only 256 colors. 

Head First: PNG, help us out here? You’ve been kind of 
quiet so far". 

PNG ： Yeah, it’s easy to be quiet when you’re #1.1 can 
represent complex images like JPEG and I’m also lossless 
like GIF. Truly the best of both worlds. 

Head First ： Lossless? 

PNG ： Right; when you store an image in a lossless 
format, you don’t lose any of the information, or detail, in 
the image. 

GIF ： Me too! I’m lossless too, you know. 

Head First ： Well, why would anyone want a lossy 
format? 

JPEG ： There’s always a tradeoff. Sometimes what you 
want is a fairly small file you can download fast, but that 
has great quality. We don’t always need perfect quality. 
People are very happy with JPEG images. 

PNG: Sure, sure, but have you ever looked at lines, logos, 
small text, solid colors? They don’t look so great with 

JPEG. 

Head First: Wait a sec, JPEG raises an interesting issue. 
So GIF and PNG, are your file sizes large? 

PNG: I’ll admit my file sizes can be on the large size 
sometimes, but I provide three formats so you can right- 
size your images: PNG-8, PNG-24, and PNG-32. 


GIF: Sounds like complexity to me — more things for your 
users to remember. 

PNG: Well, GIF, wouldn’t the world be nice if we could 
fit all images into 256 colors? But we can’t. 

GIF ： Hey, for line drawings, figures, that kind of thing, it’s 
often very easy to fit images into 8 bits, and for that I look 
great. 

JPEG ： Ha, when is the last time you saw a photo stored 
in GIF? People have figured out your downsides, GIF. 

GIF: Did I mention I can be transparent? You can take 
parts of me, and anything behind me shows right through. 

PNG: You can’t compete with me on that one, GIF. I can 
set any number of colors to transparent; you are limited to 
one color. 

GIF: One color or many, who cares? One is all you need. 

PNG: Not if you want to have anti-aliased transparent 
areas in your image! 

GIF: Huh? 

PNG: Yeah, you know, because I allow more than one 
color to be transparent, so you can have nice soft edges 
around the transparent areas. 

Head First ： That sounds like a nice feature. Gan you do 
that, JPEG? 

JPEG: No, but I’m not too worried about it; there aren’t 
many photos you’d want to do that to. That’s for logos. 

PNG: Hmmm, I’m seeing my transparency used all over 
the Web. 

Head First ： Well, I 5 11 have to think twice before doing a 
three-person interview again, but it sounds to me like GIF 
and PNG, you’re great for logos and text images; JPEG, 
you’re great for photos; and PNG, you come in handy if 
we want transparency as well as lots of colors. Bye! 

PNG, JPEG, GIF: Wait, no, hold on!!! 
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棄 


WVUCM 





Congratulations: you’ve been elected “Grand Image Format Chooser” of the day. For 
each image below, choose the format that would best represent it for the Web. 


JPEG or PNG or GIF 
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introducing the <img> element 


O 



Uh, I don’t mean to be 
rude, but we re on the eighth 
page of the IMAGES chapter and 
you STILL haven’t introduced me! 
JPEG, PNG, GIF, blah, blah, blah... 
could you get on with it? 


And now for the formal introduction: meet 
the <img> element. 

We’ve held off on the introductions long enough. As you can see, 
there’s more to dealing with images than just the HTML markup. 
Anyway, enough of that for now.. .it’s time to meet the <img> 
element. 

Let’s start by taking a closer look at the element (although you’ve 
probably already picked up on most of how <img> works by now): 


the <irwg> dcrwCht 


The elemeyrt is rnlrnc 

element l*t docs^*t dause 
I'mcbvcaks *to be mscirtcd bc-fovc 
ov a-P*tcv- *rt- 


<img src= !, images/drinks . gif n > 




The s\r£. attribute specif ies 七 he loddiioh 
o*f ah irwajc -Pile bo be mduded m the 

/ o\ the Y/ 


display 


v/cb page- 


You already krtow 
<irif»j> is d void 
clcirwcrrt. 


So, is that it? Not quite. There are a couple of attributes you’ll 
want to know about. And of course you’ll also want to know how 
to use the <img> element to reference images on the Web that 
aren’t on your own site. But really, you already know the basics of 
using the <img> element. 

Let’s work through a few of the finer points of using the <img> 
element, and then put all this knowledge to work. 
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<img>: if s wot just relative links anymore 


The sre attribute can be used for more than just relative links; you can also put a URL in 
your sre attribute. Images are stored on web servers right alongside HTML pages, so every 
image on the Web has its own URL, just like web pages do. 

You’ll generally want to use a URL for an image if you’re pointing to an image at a different 
website (remember, for links and images on the same site, it’s better to use relative paths). 

Here’s how you link to an image using a URL: 


<img src= ,f http : //www. starbuzzeof fee. com/images/corporate/ceo. jpg n > 



The URL is the fath *to -the 




Here’s a "Sharpen your pencil” that is actually about pencils (oh, and images too). This exercise 
involves a bit of trivia: Given a typical, brand-new pencil, if you drew one continuous line with it, 
using the entire pencil up, how long would the line be? 

What’s that got to do with images? To find the answer, you’re going to have to write some HTML. 
The answer to this trivia is contained in the image that is at the URL http://wickedlysmart.com/ 
hfhtmlcss/trivia/pencil.png. Your job is to add an image to this HTML and retrieve the answer: 


<html> 

<head> 

<title>Sharpen your pencil trivia</title> 

</head> 

<body> 

<p>How long a line can you draw with the typical pencil?</p> 

<p> 


</p> 

</body> 

</html> 



you are here ► 


171 








questions about images 


So the <img> element is quite 
simple—it just provides a way to specify 
the location of the image that needs to be 
displayed in the page? 

Yes, that about sums it up. We’ll talk 
about a couple of attributes you can add to 
the element. Later, you’ll see a number of 
ways to use CSS to change the visual style 
of an image. 

But there’s a lot to know about the images 
themselves. What are the different image 
formats for? When should I use one over the 
other? How big should they be? How do I 
prepare images for use in a web page? 

We’ve learned that void elements 
are elements without content or a closing 
tag. We’ve also learned that the <img> 
element is void. But doesn’t it have 
content (the image)? 

Well, to be more precise, a void 
element is an element that doesn’t have any 
content in the HTML page to put the opening 
and closing tags around. True, an image 
is content, but the <img> element refers to 
the image. The image isn’t part of the HTML 
page itself. Instead, the image replaces the 
<img> element when the browser displays 
the page. And remember, HTML pages 
are purely text, so the image could never 
be directly part of the page. It’s always a 
separate thing. 


tJiereiare no ^ 

Dumb Questi9ns 


Back to the example of a web page 
loading with images...when I load a web 
page, I don’t see the images loading one 
after the other. Why? 

Browsers often retrieve the images 
concurrently. That is, the browser makes 
requests for multiple images at the same 
time. Given the speed of computers and 
networks, this all happens fast enough that 
you usually see a page display along with its 
images. 

If I see an image on a web page, 
how do I determine its URL so that I can 
link to it? 

Most browsers allow you to right-click 
on an image, which brings up a contextual 
menu with some choices. In these choices, 
you should see “Copy Image Address" or 
“Copy Image Link,” which will place the 
URL in your clipboard. Another way to find 
the URL is to right-click and choose “Open 
Image in New Window,” which will open 
the image in a browser window. Then you 
can get the URL of the image from the 
browser’s address bar. A last option is to use 
your browser’s View Source menu option 
and look through the HTML. Keep in mind, 
though, you might find a relative link to the 
image, so you’ll have to “reconstruct” the 
URL using the website domain name and the 
path of the image. 


What makes a JPEG photo better 
than a GIF or PNG photo, or a GIF or PNG 
logo better than a JPEG logo? 

“Better” is usually defined as some 
combination of image quality and file size. 

A JPEG photo will usually be much smaller 
than an equivalent-quality PNG or GIF, while 
a PNG or GIF logo will usually look better, 
and may have a smaller file size than in 
JPEG format. 

How do I choose between GIF and 
PNG? It seems like they are very similar. 

PNG is the latest newcomer in graphic 
formats, and an interesting one because it 
can support both photos as well as logos. 

It also has more advanced transparency 
features than GIF. PNG is supported by all 
major browsers now, which wasn’t true just a 
few years ago. 

To choose between GIF and PNG, there 
are a few things to consider. First, PNG 
has slightly better compression than GIF, 
so for an image with the same number of 
colors (i.e., up to 256), your PNG file may 
be smaller. If you need more colors than 
GIF can offer, and JPEG isn’t an option (for 
instance, you need transparency), PNG is 
definitely the way to go. However, if you 
need animation, then you should go with GIF 
because GIF is the only widely supported 
format that supports animation. 
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Always provide an alternative 

One thing you can be sure of on the Web is that you never know exactly which 
browsers and devices will be used to view your pages. Visitors are likely to show 
up with mobile devices, screen readers for the visually impaired, browsers that are 
running over very slow Internet connections (and may retrieve only the text, not 
the images, of a site), cell phones, Internet-enabled T-shirts...Who knows? 

But in the middle of all this uncertainty, you can be prepared. Even if a browser can’t 
display the images on your page, there is an alternative. You can give the visitor 
some indication of what information is in the image using the <img> element’s 
alt attribute. Here’s how it works: 


<img src= n http : / /wickedlysmart. com/hfhtmlcss/trivia/pencil .png ▼’ 

alt= n The typical new pencil can draw a line 35 miles long. M > 



The alt ati\ribuic \rc<\ui\rcs a bit o( 
that desdvibes 七 he 


Y |-f be displayed, 七⑼七 Ws 

V-/ IS used lis fUe. iVs like 』 you 

y/ev-e v-edd'm^ Ac >wcb ovcv i\\t 
*to 七 he alt 七 wt is wKa-b you d say 

•m fladc o( 



In this exercise you’re going to see how your browser handles the alt attribute when you have 
a broken image. The theory goes that if an image can’t be found, the alt attribute is displayed 
instead. But not all browsers implement this, so your results may vary. Here’s what you need to do: 


o Take your HTML from the previous exercise. 

❾ Update the image element to include the alt attribute 
“The typical new pencil can draw a line 35 miles long.” 

o Change the image name of “pencil.png” to “broken.png”. This 
image doesn’t actually exist, so you’ll get a broken image. 

o Reload the page in your browser. 

❺ Finally, download a couple of other browsers and give this a 
try. Did you get different results? 

fo, 7 ou 6ould tv-7 

Look at the end of the chapter to see our results... // ^ ofeva c,ow/)- 
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<img> element attributes 


Sizing up your images 

There’s one last attribute of the <img> element you should know about — 
actually, they’re a pair of attributes: width and height. You can use these 
attributes to tell the browser, up front, the size of an image in your page. 

Here’s how you use width and height: 


<img src= n images/drinks . gif 11 width= n 48 n height= 11 100 n > 



The y/idih aitvibutc tells ihc 
b\roy/sc\r how y/ide 七 he 
should appear 七 he page. 



The he. •—七 atbribu 七 e 
■tells 七 lie bvoy/sev- Ko>w 
■t^ll should 

appear *m -the page- 


Both width and height are specified using the number of pixels. If 
you’re not familiar with pixels, we’ll go into what they are in a little 
more detail later in this chapter. You can add width and height 
attributes to any image; if you don’t, the browser will automatically 
determine the size of the image before displaying it in the page. 


Why would I ever use these 
attributes if the browser just figures it out 
anyway? 

On many browsers, if you supply the 
width and height in your HTML, then the 
browser can get a head start laying out the 
page before displaying it. If you don’t, the 
browser often has to readjust the page 
layout after it knows the size of an image. 
Remember, the browser downloads images 
after it downloads the HTML file and begins 
to display the page. The browser can’t know 
the size of the images before it downloads 
them unless you tell it. 

You can also supply width and height values 
that are larger or smaller than the size of the 
image and the browser will scale the image 



to fit those dimensions. Many people do 
this when they need to display an existing 
image at a size that is larger or smaller than 
its original dimensions. As you'll see later, 
however, there are many reasons not to use 
width and height for this purpose. 

Do I have to use these attributes 
in pairs? Can I just specify a width or a 
height? 

You can, but if you’re going to go to 
the trouble to tell the browser one dimension, 
supplying the second dimension is about the 
same amount of work (and there isn’t a lot 
to be gained by supplying just a width or a 
height unless you’re scaling the image to a 
particular width or height). 


We’ve said many times that we 
are supposed to use HTML for structure, 
and not for presentation. These feel like 
presentation attributes. Am I wrong? 

It depends on how you are using these 
attributes. If you’re setting the image width 
and height to the correct dimensions, then it 
is really just informational. However, if you 
are using the width and height to resize the 
image in the browser, then you are using 
these attributes for presentation. In that case, 
it’s probably better to consider using CSS to 
achieve the same result. 
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Creating the ultimate faw site: myPod 

iPod owners love their iPods, and they take them 
everywhere. Imagine creating a new site called u my Pod 
to display pictures of your friends and their iPods from 
their favorite locations, all around the world. 、 

What do you need to get started? Just some knowledge 
of HTML, some images, and a love for your iPod. 

We’ve already written some of the HTML for this site, 
but we haven’t added the images yet — that’s where you 
come in. But before you get to the images, let’s get things 
set up; look for the “chapter5” folder in the sample 
source for the book. There you’ll find a folder named 
“mypod”. Open the “mypod” folder, and here’s what 
you’ll see inside: 


iPhohCS S\rc -f 'mc "too. 



My iPod *m Seattle/ yi>u 乙扣 see 
七 he Spade Needle- You 乙 扣’七 see 
七 he 厶 2 •召 shops. 


You’ll -f'md *tW»s m *tKc 
七 eA -foldcv. 


mypod 



lAfe’vc alvcady some 

oUk HTML U 
t ^?oA s\*tc. Vouli Ud 


index.html 


■ — 1 

photos 

.I 




iooi 
moiocl 
boioiol 
ipioinj 

seattle.jpg 




fic\rc ； s -the -Pi\rs-t iPod 


“ago irwage o-P Seattle- 


IVcVc 9 oih 9 io use the UL C： WII Jf md a double bolder 

pho^tos (olde\r "to hold m boo, bu*t ^osc *fov ^o>w* 


the images -Pov the site- 


s 
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a fan site for ipods 


Check out myPod's "iwdex.html" file 

Open up the file “index.html”，and you’ll see work has already 
begun on my Pod. Here’s the HTML so far: 






<html> Wc *tWcv/ m sowC 

<head> 

<title>myPod</title> 

<style type="text/css n > 

body { background-color : #eaf3da;} 

</style> 

</head> 

<body> This ttT/l/IL should look Bs wcVc usm^ 

<hl>Welcome to myPod</hl> 如 ba ^ Ud 叫 blocks ： <hl>, <hZ>, a,d < F >. 

<P> 

Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'll be glad to post it on myPod. So, what 
are you waiting for? 

</p> 

<h2>Seattle, Washington</h2> 

<p> 

Me and my iPod in Seattle! You can see the 
Space Needle. You can 1 1 see the 628 coffee shops. 

</p> 


</body> 

</html> 


hcvVs hov/ i*t looks 
•m b\ro\wsc\r. tJoi bad, 
but v/c meed images. 
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Sharpen your pencil 


As you can see, a lot of the HTML is already written to 
get myPod up and running. All you need to do is add 
an <img> element for each photo you want to include. 
There’s one photo so far, "Seattle—video.jpg”, so go 
ahead and add an element to place that image in the 
page below. When you’ve finished, load the page in 
your browser and check out the view of Seattle. 


<html> 

<head> 

<title>myPod</title> 

<style type= n text/css n > 

body { background-color : 
</style> 

</head> 

<body> 


#eaf3da;} 



TVis is you heed *to 


<hl>Welcome to myPod</hl> 

<p> 

Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod from, the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'11 be glad to post it on myPod. So, what 
are you waiting for? 

</p> 


<h2>Seattle, Washington</h2> 

<P> 

Me and my iPod in Seattle! You can see the 
Space Needle. You can't see the 628 coffee shops. 

</p> 


<p> 

Youv <iw^> is 

</p> 

〈 ^ ~^ 5° 矿吵七 ^ 代 . 


</body> 

</html> 
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the image is too big 


Whoa! The image is way too large 

Well, the image is right there where it should be, but that is one 
large image. Then again, most of the images that come from digital 
cameras these days are that large (or larger). Should we just leave 
the image like it is and let visitors use the scroll bar? You’re going to 
see there are a couple of reasons why that’s a bad idea. 

Let’s take a look at the image and the browser and see just how bad 
this situation is … 

rteve S ouv Wo>wscv. l-t's akou-b 
如 oUk 切 ? ^ Wov/scv 娜 dw 



If the image 
fits nicely in 
your browser 

Watch it! window, then 

your browser 
ma Y have an “auto image 
resize" option turned on. 
More on this in just a sec... 


hcvVs the “Seattle jpf you 

added "to ” 


Here’s -full s\zjc 

is bigjcv- sizjC o\ 

bvowsev y/'mdov/...mu^h big^cv-. 



iVe dould use the sdvoll 
ba\rs -to see the v-cst o( 
■the irwajc, but wouldh^t 
it be bettev- i-P wc 匕 ould 
■fit this nvfco -fchc 

bvowsev- window? 


Y/'iy\^ioV/ IS 3V)OU*t 

GOO Wde 
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Dumb Questi 


9 ns 


What’s wrong with having the user just use the scroll bar 
to see the image? 

In general, web pages with large images are hard to use. Not 
only can your visitors not see the entire image at once, but also using 
scroll bars is cumbersome. Large images also require more data to 
be transferred between the server and your browser, which takes a 
lot of time and may result in your page being very slow to display, 
particularly for users on dial-up or other slow connections. 

Why can’t I just use the width and height attributes to 
resize the images on the page? 

Because the browser still has to retrieve the entire large image 
before it scales it down to fit your page. 


And while screen sizes and resolutions tend to vary (some people 
have small monitors, some large), most people typically set their 
browsers to somewhere between 800 and 1,280 pixels wide. So, 
around 800 pixels is a good rule of thumb for the maximum width of 
your images (and your web pages too, but we’ll get to that in a later 
chapter). 

How do the number of pixels relate to the size of the 
image on the screen? 

A good rule of thumb is 96 pixels to every inch, although with 
today’s high resolution monitors and retinal displays, it can go higher. 
We used to use a standard of 72 pixels per inch (ppi), but to handle 
modern displays, the concept of a CSS pixel has been created. The 
CSS pixel is 1/96 of an inch (96 ppi). So for a 3” wide x 3” high image, 
you’d use 96 (pixels) x 3 (inches) = 288 x 288 pixels. 


You said the browser window is 800 pixels wide; what 
exactly does that mean? 

Your computer's display is made up of millions of dots called 
pixels. If you look very closely at your display, you’ll see them: 



This is uf 
o( thousands o( fixeU 
when its displayed oy\ a 


ttevc s a lo 七 
of pixels 

make up 
i\\t uppev- part o-f 
i\\t vi ☆七 of _ 


ttevVs ohc pixel. 


Well, how large should I make my images then? 

In general, you want to keep the width of your image to less 
than 800 pixels wide. Of course, you may want your images to be 
significantly smaller (or somewhat larger) depending on what you’re 
using the image for. What if the image is a logo for your page? You 
probably want that small, but still readable. After all, you don’t need 
a logo the width of the entire web page. Logos tend to run between 
100 and 200 pixels wide. So, ultimately, the answer to your question 
depends on the design of your page. For photos—which you usually 
do want to view as large as possible—you may want to have a page 
of small thumbnail images that load quickly, and then allow the user 
to click on each thumbnail to see a larger version of the image. We’ll 
get to all that shortly. 

I think my browser automatically resized the image of 
Seattle, because it fits perfectly in the window. Why did my 
browser do this? 

Some browsers have a feature that resizes any image that 
doesn’t fit within the width of your browser. But many browsers don’t 
do this, so you don’t want to rely on it. Even if every browser did have 
this feature, you’d still be transferring a lot more data than necessary 
between the server and browser, which would make your page slow 
to load and less usable. And keep in mind that an increasing number 
of people are viewing web pages on mobile devices, and large 
images will impact data usage on these devices. 
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making your images the correct size 


Resize the image to fit m the browser 

Let’s fix up this image so it fits the browser page better. Right now, this image 
is 1,200 pixels wide by 800 pixels tall (you’ll see how to determine that in a sec). 
Because we want the width of the image to be less than 800 pixels, we need to 
decide on a width that would fit our myPod web page nicely. The whole point 
of myPod is viewing photos of iPods in their surroundings, so we probably 
want to have reasonably large images. If we reduce this image size by one-half 
to 600 pixels wide by 400 pixels high, that will still take up most of the browser 
width, while still allowing for a little space on the sides. Sound good? Let’s get 
this image resized... 



eoo 

piy.cU 


V 



iVc y\ttA "to vcsizjC -the 
so iha-t ii^s still 
v-caso^ably large, but 
is less th 如 900 pixels 
wide. ^>00 seer^s like a 

灼 i 匕 e width -thai happen 

"to be o^c—hal-f the 

匕 uvveivt sizjg. 



Here’s what you’re going to do: 

O Open the image using a photo editing application. 

❾ Reduce the image size by one-half (to 600 pixels by 400 pixels), 
o Save the image as “seattle_video_med.jpg”. 
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Before we get started, 
which photo editing application 
are we going to use to resize 
the image? I have Photoshop 
Elements. Will that work? 



一 




Good question — there are lots of photo editing 
applications on the market (some freely available), 
which are all quite similar. We’re going to use 
Adobe’s Photoshop Elements to resize the images, 
because it is one of the most popular photo 
editing applications, and is available on both 
Windows and the Macintosh. If you own another 
photo editing application, you should have no 
problem following along and translating each 
editing task to your own application. 

If you don’t yet have a photo editing application, 
you might first check to see if there was one 
included with your operating system. If you have 
a Mac, you can use iPhoto to edit your photos. If 
you’re a Windows user, you might find Microsoft’s 
Digital Image Suite on your computer already. If 
you still don’t have an editing application available 
to you, follow along and for each step, you can use 
the HTML and images included in the example 
folders. 


^ 
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using a photo editor 


Open the image 

First, start your photo editing application and open the “Seattle—video, 
jpg” image. In Photoshop Elements, you’ll want to choose the “Open...” 
menu option under the File menu, which will open the Open dialog box. 
You’re going to use this to navigate to the image “Seattle—video.jpg” in the 
“chapter5/mypod/photos” folder. 


rteves i\\t Op dialog bo%. 
Use -bW»s dialog -to yvav'^aic to 

七 k “ay. 


As you navigate *thv-ou5h -foldcv-s, youll 
preview images m *thosc -roldcv-s 


see d 
hc\rc- 


• Adobe Photoshop Elements Editor FAe Edit Image Enhance Layer Select Filter View Windclv Help 
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Close 

Close All 
HSave 

Save As... 








Image Enhance Layer 


1 Edit 
New 

^ Open... 

Open Recently Edited File 
Duplicate... 


SO 




Save for Web... 


_ 罾 _ 


■■] Feather: 0 px 


Y 


seattle_video.jpg @ 21.4% (RCB/8) 


Height: 


File 



Window Help 


i O Reset Panels Undo 

m Redo □□ Organizer 备 

Mf Edit 

Create Share 


Full 

Quick Guided 


LAYERS UNDO HISTORY ▼= 


▼ Opacity: 100% ▼ 




Resizing the image 


Now that “Seattle—video.jpg” is open, we’re going to use the “Save for Web” 
dialog to both resize the image and save it. To get to that dialog box, just 
choose the “Save for Web” menu option from the File menu. 




To vcsizjc cMoosc u Savc 

-fov- iVcb” -fv-om File 



w w s s 

Qd Qd 
<> 
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resizing an image 


Resizing the image, contmued... 

After you’ve selected the “Save for Web” menu option, you should see the 
dialog box below; let’s get acquainted with it before we use it. 


This dialog lets you do all kmds tK'my. Fov 

⑽ V/, Y/cVc bo W on Kov/ *to use \i {p a^d save 

images m (or^ai (or v/cb fays. 


ttc\rc 、 whc\rc you choose the -fov-^cl-t io 
save ^u\r -Pile- Cuvvch-tly i-t ； s set b> save 
as wcVc joihj -to dhanjc this -fco 
JPE 与 ih a douple o( pa acs... 



_dow shows you you\r ovijmal ir^age o»r> -the Ic-P-t, ar>d -the ir^age 
c yoJrc savrna \i (or the l^/lcb ihc viaht Cum^ilv this is 


This 

m iov-ry\at you vc saving it +ov- the l/Vcb the vight Cu\rrerrtly "this is 
showmj ^|F v/dl be -this -fco J?B6\ \y\ siep. 
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adding images to your pages 


As you can see, there’s a lot of functionality built into this 
dialog. Let’s put it to good use. To resize the image, you 
need to change the width to 600 pixels and the height 


to 400 pixels. Then you need to save the image in JPEG 
format. Let’s start with the resize... 


(I) the siz^ 

"to a y/id-th o( ^>00 av\d a heighi 
o*f 午 00. |*P you have Co^s*t\r3m 
P\ropovtiohs eMecked, all you 
have -to do is -type -the v/idih, 
^>00, will -the 




金 Save For Web 



R71 




9 


Save an image to include in a Web page. 

Save photographs as JPEG and images with limited colors as GIF. 

The image preview shows how your image will look using the current settings. 


OK 


Cancel 


〕 



Original: "seattle_video.jpg 
2.75M 


130 sec @ 28.8 Kbps 


100% dither 
Selective palette 
256 colors 




Help 


Zoom 100% 


0 


Preview In: 


©0 


— Preset: - 

Custom 


13 — 

GIF 



一 Interlaced 

[Selective 

：) 

Colors: (； 256 ▼ 



Dither: 

100% ►' 

Transparency 

Matte : 


Animation 




— Image Size - 

Original Size — 

Width: 1200 pixels 
Height: 800 pixels 


New Size 



Width: 

600 

pixels 

Height: 

400 

pixels 

Percent: 

50 


Constrain Propo 


]a 


Apply 




Animation 
V Loop 


Delay: 0.2 


lof 1 


« 

<1 

l> 

» 




This will y\o{, ovi^mal 

jus*t -file youVc *to save- 


(2-) 0r\Ct width 

a\rc set torrcMy, 
dkk Afply *to \d 
Elements know 七 his is 
■the s\zjc. you 





y o u mus 七 dlidk Affly *to vedude {Mt Siz ^； o*thcvv/*isc, 
-the ima^e will be saved a 七 rb ovi^mal width ar\A hei^vt. 
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using save for web 


You've resized — wow save 

Now you just need to save the image in the correct format 
JPEG). To do that, you need to choose JPEG format and set 
the quality to Medium. We’ll talk more about quality in a sec. 


(I) Ko>w 



save as 


七 h 七仏 e s'i« is sc-t, 

朽 ced *to cMoost *tV^c 

“等 CWcvrtl'/ ••七 ,s 父七户 
今 |p; *to JPtq 


(Z) Sc*t ^uali-ty -to Medium. 


like xv/c^vc dov\t V^cv-c- 



⑶ Thai f s it ； 
9° "t° "the hcx*t 


Notice 七 ha 七 you dlidkcd Apply 

•m 七 k fv-evious -the imay was 
vcsizjcd Bv\A v-edisflayed- 


186 Chapter 5 





































































































adding images to your pages 


Save the image 

After you click OK, you’ll get a Save dialog. Save the image as 
“seattle_video_med.jpg” so you don’t overwrite the original photo. 


the -filc^arwc -to Seattle video med 


jP5* 


Save Optimized As 


Save Asl seattIe_video_me d.j p g| 


Where: [ photos 




Cancel 


Save 


you "the -f ilc^rwc -Pv-orw “Seattle 一 vidco j 門 ” 

•to Vattle 一 video 一 rwed jpg’. lA/hy? People usually like -fco save ihciv 
ovijmal, hijh-^uali-ty, bij pho-tos -Pov- p\riirtm 少 and pu 七 smaller 
vc\rsio^s -the lA/cb. {( you saved this as “Seattle 一 videoj〆' 
you’d be losing 七 he ovi^'mal pho-to/ 


Make suve youVc 
saving 七 he irwa^C \v\ 七 he 
U rwypod/pho-tos^ -Poldcv. 




Clidk Save *bo 
save 七 he ima^e- 



Dumb Questi 


9ns 


Can you say more about the quality 
setting in “Save for Web ”？ 


The JPEG format allows you to specify 
the level of image quality you need. The 
lower the quality, the smaller the file size. If 
you look at the preview pane in the “Save 
for Web” dialog, you can see both the quality 
and file size change as you change the 
quality settings. 



-fovrucl-t 


Piio*toshof Elements cvcr> 
-tells you iiov/ I 。％ i 七 would 
-take *to *t\rar>s-Pcv ovcv a 
dial-up modem *to a bvowsev-. 


The best way to get a feel for quality 
settings and the various image formats is to 
experiment with them on your own images. 
You’ll soon figure out what quality levels 
are needed for your image and the type of 
web page you’re developing. You’ll also get 
to know when to use JPEG versus other 
formats. 

What is the number 30 next to the 
Quality label in the JPEG Options dialog 
box? 

The number 30 is what Photoshop 
Elements considers Medium quality. JPEG 
actually uses a scale of 1-100%, and Low, 
Medium, High, etc. are just preset values 
that many photo editing applications use. 


Couldn’t I just use the <img> 
element’s width and height attributes to 
resize my image instead? 

You could use the width and height 
attributes to resize an image, but that’s not 
a good idea. Why? Because if you do that, 
you’re still downloading the full-size image, 
and making the browser do the work to 
resize the image (just like when you have 
the auto resize option on in browsers that 
support that feature). The width and height 
attributes are really there to help the browser 
figure out how much space to reserve for the 
image; if you use them, they should match 
the actual width and height of the image. 
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test driving your image size 


Fixing up the myPod HTML 

Once you’ve saved the image, you can close Photoshop Elements. Now all you need to do is change the 
myPod “index.html” page to include the new version of the photo, “seattle_video_med.jpg”. Here’s a 
snippet of the “index.html” file, showing only the parts you need to change. 

<html> 

<head> 

<title>myPod</title> 

<style type="text/css n > 

body { background-color : #eaf3da;} 

. you vc 
I” f ile. 

J\\\ you ^ccd *to do is 

m -tKc <\^> 

7 / 如 ” aw J ^ you just 

<h2>Seattle, Washmgton</h2> 七七一 video 一州 edlj 門 . 

<p> 

Me and my iPod in Seattle! You can see the 
Space Needle. You can't see tAe 628 coffee shops. 

</P> 

< P > 七 

<img src= n photos/seattie 一 video—med.jpg’▼ alt="My iPod in Seattle, WA n > 
</p> 一 - 




</head> 

<body> 


Tk oUk HTML yes 
already 30-t *i*t m youv u mdc^ ^i 


</body> 

</html> 


And wow for the test drive... 


Go ahead and make the changes, save them, and 
reload “index.html” in your browser. Things 
should look much better. Now the image is sized 
just right to give your visitors a good view~without 
overwhelming them with a large photo. 


Nov/ 七 he ir^ajc -fits widely m 七 he 
bv-ov/sev- y/mdoy/. / \hd its d smaller 
•file siz^ -too, will help 七 he 
fajc load rwovc ^uidkly. 
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Your task this time: open the file “chapter5/testimage/eye.jpg” in Photoshop Elements. Open the “Save for Web” 
dialog and fill in the blanks below by choosing each quality setting for JPEG (Low, Medium, High, etc.), as well as 
PNG-24 and GIF. You'll find this information in the preview pane below the image. Once you’ve finished, determine 
which setting makes the most sense for this image. \ Fov-ma*t 

t 鹹 £izjg o( imajC 
Kbps<_ 、 TirwC "to tvahS-pCV- OVCV - 
dial-up rhodervt 


- i 






m 


JP€C 
li.9fiK 
5 5€c @ 2B.S 


Format Quality Size Time Winner 


Tiry iool 

^ . 


?m-ZA 



JPE& 


JPEfr 


JPE& 


JPE& 



&IF 


N/A 



Maximum 



High 



Medium 



Low 



N/A 
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adding more images 


More photos for myPod 


A new batch of photos has arrived for myPod: three more from Seattle and a few from 
a friend in Britain. The photos have already been resized to less than 800 pixels wide. 
Add the <img> elements for them (you’ll find the images already in the photos folder): 


<html> 

<head> 

<title>myPod</title> 

<style type= n text/css"> 

body { background-color : #eaf3da;} 
</style> 

</head> 

<body> 

<hl>Welcome to myPod</hl> 


Fed -fv-cc "to add some youv 
ovm pho-tos as well. Just 
\rcrhcmbc\r -fco \rcsiz^ them -fiv-st. 


<p> 

Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod, from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'11 be glad to post it on myPod. So, what 


are you waiting for? 

</p> 


<h2>Seattle, Washington</h2> 


<p> 

Me and my iPod in Seattle! You can see the 
Space Needle. You can't see the 628 coffee shops 

</p> 

<p> 

<img src= M photos/seattle_video_med.jpg" alt= M My video iPod in Seattle, WA M > 
<img src= n photos/seattle 一 classic.jpg n alt= n A classic iPod in Seattle, WA M > 
<img src= n photos/seattle 一 shuffle•jpg n alt= n An iPod Shuffle in Seattle, WA M > 
<img src= M photos/seattle_downtown.jpg" alt= n An iPod in downtown Seattle, WA"> 
</p> — 


U 仏 keep all the 

Seattle pho-tos 〜诎饮 . 


<h2>Birmingham, England</h2> 


.Sanr»C y/rth -the 
匕 Bi\rnr\'m^3inrt pho*tos... 


<P> 

Here are some iPod photos around Birmingham. We've obviously got some 
passionate folks over here who love their iPods. Check out the classic 


red British telephone box! 

</p> 


<p> 

<img src= M photos/britain.jpg" alt= n An iPod in Birmingham at a telephone box ’） 
<img src= M photos/applestore.jpg" alt= n An iPod at the Birmingham Apple store n > 

</p> 

</body> 

</html> 
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Taking my Pod for another test drive 


At this point we don’t need to tell you to reload the page 
in your browser; we’re sure you’re way ahead of us. Wow, 
what a difference a few images make, don’t you think? 
This page is starting to look downright interesting. 

But that doesn’t mean you’re there yet. While you’ve got a 
great set of images on the page, and even though you’ve 
already resized them, the images are still quite large. Not 
only is the page going to load more and more slowly as 
you add more images, but also the user has to do a lot 
of scrolling to see them all. Wouldn’t it be better if users 
could see a small “thumbnail” image for each photo, and 
then click on the thumbnail to see the larger image? 



rteves y/Ka*t 
七 he v/V>olc 
looks like 

dll 


瓜 d hcircs what the page 

looks like how, dlose up. 


•ir»»ays. 


myPod 


◄ ► | | + 1 1 ^ file:///chapter5/mypod/index.html 


C ] Coogle 


Welcome to my Pod 


Welcome to the place to show off your iPod, wherever you might be. Wanna join the fun? All you 
need is any iPod, from the early classic iPod to the latest iPod Nano, the smallest iPod Shuffle to the 
largest iPod Video, and a digital camera. Just take a snapshot of your iPod in your favorite location 
and we’ll be glad to post it on my Pod. So, what are you waiting for? 

Seattle, Washington 


Me and my iPod in Seattle! You can see the Space Needle. You can't see tlie 628 coffee shops. 
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using thumbnail images 


Reworking the site to use thumbnails 

You’re now going to make this page more usable by substituting a 
smaller image (which we call a thumbnail) for each photo, and then you’ll 
create a link from that thumbnail to each of the larger photos. Here’s 
how you’re going to do this, one step at a time: 

o Create a new directory for the thumbnails. 

Resize each photo to 150 by 100 pixels and save it in a 
“thumbnail” folder. 

Set the sre of each <img> element in “index.html” 
to the thumbnail version of the photo. 

Add a link from each thumbnail to a new page 
containing the larger photo. 

Create a new directory for thumbnails 

To keep things organized, create a separate folder for the thumbnail 
images. Otherwise, you’ll end up with a folder of larger images 
and small thumbnails all lumped together, which could get quite 
cluttered after you’ve added a significant number of photos. 

Create a folder called “thumbnails” under the “mypod” folder. If 
you’re working from the book example files, you’ll find this folder 
already in there. 



Cv-ca-tc a ^oldcv- 
七 he -foldcv. 
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adding images to your pages 


Create the thumbnails 


You’ve got a place to put your thumbnails, so let’s create them. Start by 
opening “seattle_video_med.jpg” with your photo editing application. 

You’re going to resize it to 150 by 100 pixels using the same method you 
used to create the 600 by 400 version: 

I, p^sKoP & ⑽如 卜 ，七 ^ ^ - 

LL ^^^^ 

menu ofti< ’ 




With the image resized, choose OK and save it as the same name but 
in the thumbnailfolder. Be careful: if you save it to the “photos” folder, 
you’ll be replacing the larger image. 


Now, repeat this for each photo in your “photos” folder. 


|-f you’ve v/o\rkm^ with e 乂 ample 

-files, you’ll -fmd the thumbnails 
already m the -folder 

so you have *to do cvcv-y ov\t 

(a-P*tc\r all ； youVc ttTML, 

ba*tdh pho-bo pv-o^css'mj). 



0 


o 


What about the photos 
from Birmingham—they are 
taller than they are wide. Does 
150x100 make sense? 





Good catch. Because these images are taller than 
they are wide, we have two choices: we can switch 
the dimensions and make them 100 by 150, or we 
can crop each image and make a 150-by-100-pixel 
thumbnail from it. We’re going to make ours 100 
by 150; feel free to crop them and create 150-by- 
100-pixel images if you’d like to explore how to do 
that in your photo editing application. 
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using a thumbnails folder 


Rework the HTML to use the thumbnails 

Now you just need to change the HTML so that the <img> elements get their images from 
the “thumbnails” folder rather than the u photos” folder. And because you’re currently using 
relative paths like “photos/seattle_video_med.jpg” ， that’s going to be simple: for each <img> 
element, all you need to do is change the folder from “photos” to “thumbnails”. 

<html> 

<head> 

<title>myPod</title> 

<style type= n text/css'▼> 

body { background-color : #eaf3da;} 

</style> 

</head> 

<body> 

<hl>Welcome to myPod</hl> 

<p> 

Welcome to the place to show off your iPod, wherever you might be. 

Wanna join the fun? All you need is any iPod, from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'11 be glad to post it on myPod. So, what 
are you waiting for? 

</p> 

__All you -to do is the 

<h2>Seattle, Washington</h2> -fvom *to U *thumb^ils w 

Me and my iPod in Seattle!/You can see the 
Space Needle. You can't s ( ee the 628 coffee shops. 

</P> 

<P> 

<img src= M thumbnails/5eattle_video_med.jpg" alt= M My video iPod in Seattle, WA"> 
<img src= n thumbnails/seattle 一 classic•jpg n alt= n A classic iPod in Seattle, WA M > 
<img src= M thumbnails/seattle_shuffie.jpg" alt= n An iPod Shuffle in Seattle, WA M > 
<img src="thumbnails/seattle_downtown.jpg" alt= n An iPod in downtown Seattle, WA"> 
</p> 

<h2>Birmingham, England</h2> 

<p> 

Here are some iPod photos around Birmingham. We've obviously got some 
passionate folks over here who love their iPods. Check out the classic 
red British telephone box! 

</p> 

<P> 

<img src= M thumbnails/britain. jpg" alt= n An iPod in Birmingham at a telephone box ’） 
<img src= M thumbnails/applestore.jpg" alt= n An iPod at the Birmingham Apple store"> 

</p> 

</body> 

</html> 
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adding images to your pages 


Take myPod for another test drive 


Ahhh.. .much better. Visitors can see all the 
available pictures at a glance. They can also tell 
which photos go with each city more easily. Now we 
need to find a way to link from each thumbnail to 
the corresponding large image. 


7 


_ 

卜 I 1 十 1 * ^ nie /7/chdpu；f 5/mypod/index.html 


myPod 


^ 1 (Q* Google 


Welcome to myFod 

Welcome to the place to show off your iPod, wherever you might be. Wanna join the fun? All you need 

classic iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
Vldeo ' anda dl 8 ltal camera. Just take a snapshot of your iPod in your favorite location and well be 
glad to post ii on myPod. So, whai are you waiting for? 

Seattle, Washington 

Me and my iPod in Seattle! You can see the Space Needle. You can't see the fi28 coffee shops. 

Birmingham, England 

^ ^ photos 咖恤 ^inmngham. We've obviously got some passionate folks over here 
who love their iPods. Check out the classic red British telephone box! 


O 


Wait a sec, don’t 
you think youre pulling a 
fast one? The images used to 
be on top of each other; now 
they re side by side. 



Right, but remember the <img> element is 
an inline element. 

In other words, we didn’t “pull anything.” Because <img> is 
displayed as an inline element, it doesn’t cause linebreaks to be 
inserted before and after the element is displayed. So, if there 
are several images together in your HTML, the browser will fit 
them side by side if the browser window is wide enough. 

The reason the larger photos weren’t side by side is because the 
browser didn’t have room to display them next to each other. 
Instead, it displayed them on top of each other. A browser 
always displays vertical space before and after a block element, 
and if you look back at the screenshots, you’ll see the images 
are right on top of each other with no space in between. That’s 
another sign <img> is an inline element. 
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linking to the thumbnails 


Turning the thumbnails into links 

You’re almost there. Now you just need to create a link from each 
thumbnail image to its larger version. Here’s how this is going to work: 


A visrtov a 七 WwAmail she 1’kcs] 
S3Y i\\t dowtow »Pod 


七 he v\sVbov* t\\tVs 


广 … the bmowsev v-ctv-icvcs 
J f hCW P 吵 with 仏 



To do this you need two things: 


o A page to display each photo along with a 
heading that describes its content. 

❺ A link from each thumbnail in “index.html” 
to its corresponding photo page. 


Let’s create the pages first, and then we’ll come back and 
finish off the links. 
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adding images to your pages 


Create individual pages for the photos 

First, create a new folder called “html” to hold these individual pages, just 
below the “mypod” folder: 



mypod 


html 



Now we’re going to create one HTML file for each photo. If the photo is called 
“seattle_video_med.jpg”，then let’s call the HTML file “Seattle—video_med.html” 
just to be consistent. In each HTML file, we’ll have a heading that describes 
the photo, followed by the photo. Here’s the HTML for the first Seattle photo. 
All the other pages will follow this same format: 


you vc pvobaklY 
guessed) alvcadv 
七 Wis -foldcv- -fov 

you m book 



Trtle W Tk 

should dcstnkc pVurto. 



s ou\r veady bake CSS 
亨 1 〜 j us 七 "to keep the page 

a dohsistcht dolov. 


<html> 

<head> 

<title>myPod : Seattle Ferry</title> 

<style type= M text/css n > body { background-color : #eaf3da; } </style> 

</head> 

<body> \^_ —" 、 ttcv-c wc jive the a dcs^v-iptivc hcad'mj. 

<hl>Seattle Ferry</hl> 

<p> 

<img src= n ••/photos/Seattle 一 video— med.jpg n alt= M A video iPod on the ferry n > 


</p> 

</body> 

</html> 



T 1 


tteve's i\\t <im5> *tKa*t fomis -to laqe 

^Seattle 一 • 一 pKo*to- Lc*ts also ^ivc 
imd^e a dcsdv-iptivc alt atbribu 七 e. 


Notice that wc y\tt& *fco use u .. w \y\ *tlic relative path 
because the w lvtnr»| w -Poldev- is a sibling o-P u pho*tos w 
-Poldcv, so v/c have *to 50 up ok>c -Poldcv- dhd 七 he 的 dovm 
iivto w pho*tos’ >n\)Cy\ usmg relative Imks. 
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linking with <a> and <img> 


， • 


ExegciSe 


If you look in the “html” folder in the chapter example files, you’ll find all of the single photo 
pages already there, except one—the page for “seattle_downtown.jpg”. Create a page called 
“seattle_downtown.html” in the “html” folder, and test it out. Get this working before you move on. 
You'll find the answer in the back of the chapter if you have any problems. 


So, how do I make links out of images? 

You’ve got your large photos, your smaller thumbnails, and even a set of 
HTML pages for displaying individual photos. Now you need to put it all 
together and get those thumbnails in “index.html” linked to the pages in the 
“html” folder. But how? 

To link an image, you put the <img> element inside an <a> element, like this: 


Wtrts 七 he <\^> clem ⑼七 



f[Y\d here’s 扣 <3> 

<»m5> element 


o\rc 



u 丄丄 ■ J ur，c Y^OXO) 

艾以 which 


<a href="html/Seattle downtown.html"> 

<img src= n thumbnails/seattle— downtown•jpg" 
alt="An iPod in downtown Seattle, WA n > 


</a> 

HevVs the 

dos’mg <a> tag. 




TKc <\vnOj> clcmcir\*t "is nested 
diV"Cd*tly ms'ldc 七 & <3> clcrwcir>*t- 


Once you’ve placed the <img> element into an <a> element, the 
browser treats the image as a clickable link. When you click the 
image, the browser will retrieve the page in the href. 
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adding images to your pages 


Add the image links to "mdex.html" 

This is the last step. You just need to wrap <a> elements around each thumbnail’s <img> 
element in your “index.html” file. Remember, the href of each <a> element should link to 
the page containing the large version of the image in the “html” folder. Make sure that your 
links, thumbnails, and pages all match up correctly. 

Here’s the complete “index.html” file. All you need to do is add the HTML marked in gray. 

<html> 

<head> 

<title>myPod</title> 

<style type= n text/css'▼> 

body { background-color : #eaf3da;} 

</style> 

</head> 

<body> 


<hl>Welcome to myPod</hl> 

<P> 

Welcome to the place to show off your iPod, wherever you might be. 
Wanna join the fun? All you need is any iPod, from the early classic 
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest 
iPod Video, and a digital camera. Just take a snapshot of your iPod in 
your favorite location and we'11 be glad to post it on myPod. So, what 
are you waiting for? 

</p> 

<h2>Seattle , Washington</h2> 

<p> 

Me and my iPod in Seattle! You can see the 
Space Needle. You can't see the 628 coffee shops. 

</p> 


<P> 


<a href: 

= M html/seattle video med.html n > 


<img 

src= n thumbnails/seattle video med.jpg M alt=' 

▼My video iPod in Seattle, WA n > 

</a> 



<a href= n html/seattle classic.html n > 


<img 

src= n thumbnails/seattle classic.jpg" alt="A 

classic iPod in Seattle, WA n > 

</a> 



<a href= 

= M html/seattle shuffle.html n > 



<img src= n thumbnails/seattle—shuffle•jpg n alt="A iPod Shuffle in Seattle, WA n > 
</a> 
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adding the links to the thumbnails 


<a href= M html/seattle_downtown.html"> 

<img src= n thumbnails/seattle— downtown•jpg n alt="An iPod in downtown Seattle, WA n > 
</a> 

</p> 

<h2>Birmingham, England</h2> 

<p> 

Here are some iPod photos around Birmingham. We've obviously got some 
passionate folks over here who love their iPods. Check out the classic 

red British telephone box! 

</p> 

<P> 


<a href= M html/britain.html n > 


<img src="thumbnails/britain.jpg" alt="An 

iPod in Birmingham at a telephone box"> 

</a> 


<a href= M html/applestore.html"> 


<img src="thumbnails/applestore.jpg" alt=' 

'An iPod at the Birmingham Apple store'▼> 


</a> 

</p> 

</body> 

</html> 


Fov taeM v/vap <a> t\c^i aro^d it 

v)us 七 be dav-c-ful *bo Wrf m eaA Imk. 


Add these <a> elements to your “index.html” file. 
Save, load into your browser, and check out myPod! 


A 




thereiare no o 

Dumb Questions 


When we put an <a> element around text, we get an 
underline. Why don’t we get something equivalent with images? 

Actually, Internet Explorer puts a border around an image 
to show it is linked. (Our browser, Safari, doesn’t do that.) If your 
browser puts a border around or a line under your linked images, and 
you don’t like it, hold on a few more chapters and you’ll learn how to 
change that with CSS. Also notice that when you pass your mouse 
over an image, your cursor will change to indicate you can click on 
the linked image. In most cases your users will know an image is 
linked by context and by the mouse cursor, even if there's no border. 


Can’t we just link to the JPEG image directly without all 
those HTML pages? I thought the browser was smart enough to 
display images by themselves. 

You’re right; you could link directly to the image, like this: <a 
href=“photos/seattle_downtown.jpg”> ... </a>. If you did that and 
clicked on the link, the browser would display the image by itself 
on a blank page. In general, though, linking directly to an image is 
considered bad form, because you usually want to provide some 
context for the images you are displaying. 
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adding images to your pages 


The my Pod web page 
is looking awesome! I think 
you should add a logo to the 
page—that would add a great 
finishing touch. 


Great idea. In fact, we’ve got a my Pod 
logo all ready to go. 


Take another look in the folder 
“chapter^/mypod’’，and you’ll find a 
folder called “logo”. In that folder you’ll 
find a file called “mypod.psd”. The 
“.psd” means that the file has been saved 
in the Photoshop format, a common 
format for image editing software. But 
Photoshop format files are meant for 
processing digital images, not for web 
pages, so we’ll have to do some work to 
get a “web ready” image from it. 



^ f oio cdi % 

^sia^d .psd so eve, 

g yo 十七， p ho “ 

follow alohg ^ 
the ^ 

appl.^t,o,ope. -the >sd w 

Z c ： ^ ^ ^ — 4 - 

ih the u lo 3 o w UdtY. 


you are here ► 


201 



adding a logo 


Open the myPod logo 


Let’s check out the myPod logo: open up the file “mypod.psd” 
in the “chapter5/mypod/logo” folder in Photoshop Elements: 


You II (\y\A -tKc “lo〆 folder 

i\\t -folder. 



|-f yo[AV" piio*to editm^ 

appli 匕灼 >NOY\{, 

{\\t -file, -folloy/ a\ov\^ 
a^yv/ay—same 
pvmtiplcs apply -fov 
-fo\rma*U 3s v 


y/cll- 



A closer look 


Nice logo; it’s got some typography combined with two circles, 
one gray and one white (obviously inspired by the click-wheel 
controls on the classic iPod). 


But what is that checkered pattern in the background? That’s 
the way most photo editing applications show you areas that 
are transparent. Keep all that in mind as we choose a graphic 
format for the logo … 



VVV^c^cvcv- Y ou scc 七 h |S 
t\\tcVtrtd ?a 七七州 

mdaatcs a 

av-c3 ^ 

七 he ir^ay- 
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adding images to your pages 


What format should we use? 


You already know that we have a couple of options in deciding how to save this 
image: we could use JPEG, PNG, or GIF. This logo uses only three colors, text, 
and some geometric shapes. From what you’ve learned about the two formats, 
you’re probably leaning toward PNG or GIF. Either would be fine; the PNG 
might be a slightly smaller file at the same quality, so we’ll go with PNG. And, 
because we only have three colors, we’ll be safe using PNG-8 which allows only 
256 colors, so using this format will reduce the file size even more. 


So, go ahead and choose the “Save for Web” option under the File menu, and 
then choose PNG-8 in the format drop-down. You’ll see we have a few more 
options. Let’s take a look... 

use this P ul|-dow, 

-to sci Uc 

^ P^-0 {o save 
tnc Io0o. 


Save For Web 


^7 


Save an image to include in a Web page. 

Save photographs as JPEG and images with limited colors as GIF. 

The image preview shows how your image will look using the current settings. 


1 

nyPod 

( 

Original: 'mypod.psd* 

111K 

I- 

1 

nyPod 



PNG-8 

4.166K 

2 sec @ 28.8 Kbps 


100% dither 
Selective palette 
254 colors 



Hcv-C s y/Kcvc PKo*tosiiop 
6lcrrvcy>*ts siioy/s you 
y^urwbev of tolovs 
used *to save *tKc PN^- 
|*t’s alv-cady sc*t b> 

W P 降虼 
Wlc’ll leave it *tKcv-c. 


Zoom 11 00% ▼ 、 


Preview In: 




V Loop 


Dela\ 

r ： 0.2 


lof 1 

« 

<i 

ii> 

» 



f you set 七 he 
」 -Po\rinr»a-t {o?b!6l ，this 

apfeavs. By default, 
i*t’s cMctkcd- Do y/c 

badkjv-ou^d? 


Also hotc the 

Msiic opti Oh. 

This is ^related "to 
■tv-ahspav-ch^y, as 
you II see ih a scd. 


Tv-y Tva^spav-c^ty dhcdkbo %： 

you II see -the PN^ fv-eviow a*t *tKc bottom 
b> a >whi*tc badk^v-our>d. 
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choosing transparency 


To be trawsparcwt or wot to be transparent? 
That is the question... 

The myPod logo is going to be placed on a light green 
background, so you might think that transparency is going 
to be a good thing, right? Well, let’s compare how the logo 
looks using a few options in the “Save for Web” dialog: 


七 he logo saved *th\rcc •⑼七 ways 

displayed 。的 a v/cb page >/i*th a bddk^ou^d- 



^ov/ v/cVc -this looks Fov- -this 

vcvsioi^, y/c *told Pho*toshop Elcrwc^-ts *to 七 he 

matte av-ou^d us'm^ a <yree 的 ba^k^ou^d- 

ttow? IVlcll show you 於此 


l°°V I u a A ^ 


V^oy/cvcv 

Y/WrU W ? a —. 


Hcvc^s y/Ka*t v/c i-f 
Tv-av>spav-cv>ty a 。 save. Bcttcv... 
but Neat’s >wiVi*te %al。” 
av-our>d *tKc Irbtevs m 七 he 1050 ? 

T\\c halos \\a^tY\ because *tKc 
pKo*to cditm^ application dv-catcs 
a w ma*t*tc w *to sar*tcy> s 

ed^es d^d'msi tiic badk^vou^d 
tolov-. l/VKcy> *i*t did (or tiVis 
lo^o, Koy/cvcv ； i*t assumed i*t >w3s 
sof*tcv>m^ cd^cs 3 

y/K*i*tc ba 乙 kyou 灼 d. 


204 Chapter 5 

















adding images to your pages 


Save the trawsparcwt PNft 

You know you want a transparent PNG version of the logo, 
and you also know we’ll need to use a matte to prevent the 
halos around the text. Let’s check out the PNG panel of the 
“Save for Web” dialog. 


You ky\o>w *to 
t^oosc f 
al^rcadY* 


Tva^spa\rc^dy. 



「 Preset: - Custom 

：1 —— ^V| 

PMC-S : | Interlaced 

Selective :彳 Colars: 

1 25G 

Dither: 

f^[ Transparency Matte: 

100% ► 

I' 



No>w y/c v\tcd -to -take a look at 
七 he Matte option. 


The Matte option allows you to select the color for the matte 
around the text. And we want that to be the color of the web 
page background. 


Save For Web 


5T 

Z 

■ 


9 


Save an image to include in a Web page. 

Save photographs as JPEG and images with limited colors as GIF. 

The image preview shows how your image will look using the current settings. 


OK 


Cancel 


1 

nyPod 


Original: _mypod.ps(T 

111K 

「 

Co 

i 

nyPod 


PNG-8 100% dither 

4.166K Selective palette 

2 S€€ @ 28.8 Kbps 254 colors 

Zoom ： 11 00% t 

Preview In:▼ 




Help 


r - Preset: 




PNG-8 



Selective 

T) 


Interlaced 


Colors: ^ 256 

100% ►、 


Dither: 


0 Transparency Matte: 




Image Size - 

— Original Size - 

Width: 285 pixels 
Height: 100 pixels 


New Size 


Width: 


285 


Height: 100 


pixels 

pixels 


]l 


J^rcent: 1100 

Constrain Proportions 


Animation 


V Loop 


Delay: 0.2 

, 

lof 1 


« 

<1 

IO 

» 







The Matte option 

supplies 七 he Co\oy (or 

-the cdjcs o-P 
the Smdc the v/eb 
pay is a lijh-t jv-cch, y/c 
v/a 灼七 七 0 use 七 he same 
Color -fov- -the rwattc. 




None 

Eyedropper Color 

White 

Black 


Other... 


• //• 


t 


Choose u 0il->cv-... w s'mde 
ouv dolov is /七 listed- 
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what is the background color? 


Wait what is the color of the web page background? 

Remember that R 的 py B3K6 CSS in the myPod “index.html” file? 

That CSS is what sets the background color of the page to light 
green. And that’s where we can get the color: 



〈style type= n text/css M > ^ Here’s 七 badk^\rour>d 

body { background-color : ^eaf3d^) } 匕 olov* vi^vt hen 

</style> 

iVhat? You tell that’s I 吵七 

OjrttY\^ Fov- y\ovj, take ou\r wo\rd -rov 

i*t ； well dome ba^k *to this m a -few 
dhaptev-s e^pla'm all about ^olov-s. 



Set the matte color 


When you click on the Matte pull-down menu and choose the “Other..menu 
option, Photoshop Elements will bring up the Color Picker dialog. 



TKc Color ?\tVcr 5'ivcs 70U d \oi 
七呼 * to cMoost tV^c 

matte tolov-. Wc jus-t y/avrt *to 
sti i*t -to katkyouyvd toW 
of i\\t >wcb pay, aWtad^ 

kwo>w is eaGda … 




.y/hidh is *bo 50 v-ight hcv-c- 
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Set the matte color, continued 

Go ahead and enter the color, “eaf3da”，into the “Color Picker’’ dialog box. 
You’ll see the color change to the background color of the myPod page. 



Check out the logo with a matte 


Tv?c kiitrs m r\(^i 
jL \>o% \s dts\^td s ? c6+^all7 W 
tolovs m i\\t >wck Ww 七 . 

You ^ lc 七七 m ^一 

ov- lo>wcv-tasc ； \i docs〆 七 mattev-. 


Oy\U you^vc -typed *thc Color 
'm*to the Colov- Pi^kcv-, dlidk 
0\( Br\d it will apply -the 
-fco the logo. 


Now take a close look at the logo again in the preview pane. You’ll see Photoshop 
Elements has added a light green matte around the hard edges, which will give the 
myPod logo text a softer, more polished look when the logo is in the web page. 



Nov/, you look tlosc ai "tW 
\oy>, you II see i\\t matte ma-UV>cs 

Co\or *m batk^ou^d o\ tV^C 

myPod pay* 
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saving the logo 


Save the logo 

Okay you’ve made all the adjustments you need to in the “Save for Web” 
dialog, so go ahead and click OK to save the image as “mypod.png”. 


Elements y；'ill au-to^at'^allY 

-f ilename *to w * ^, avc 
\^t as W m 

w |。〆 -folder. 


Add the logo to the myPod web page 

Now all you need to do is add the logo to the myPod web page. 

We’ll add it to the top so it appears above the website description 
and iPod images. That way, it’s the first thing your visitors see 
when they come to your myPod page. 

<html> 

<head> 

<title>myPod</title 〉 

<style type="text/css n > 

body { background-color : #eaf3da;} 

</style> 

</head> 

<body> 

<P> 

<img src=" logo/mypod. png" alt="myP 
</p> 

<hl>Welcome to myPod</hl> 

、 Rcs*t o-P 乂 irW” HTML hcvc... 

</body> 

</html> 


} od Logo n > 


Add the logo at "the "top o*f the 
r^ypod y/cb page. h> use the 

\rdativc path -Pov- the logo, 
the “logo" -Polder ay\d add av\ a\i 

attribute that des^v-ibes the 


youv- 

七 

七 he 
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Awd wow for the final test drive 


Let’s test this puppy! Reload the web page in the browser 
and see how your my Pod transparent PNG logo works. 



« o o 


myPod 


M file:///chapterS/mypod/index.html 


C I' 


^ - 

Google 


yPod 

Welcome to myPod 

Welcome to the place to show off your iPod, wherever you might be. Wanna join the fiin? All you 
need is any iPod, from the early classic iPod to the latest iPod Nano, the smallest iPod Shuffle to the 
largest iPod Video, and a digital camera. Just take a snapshot of your iPod in your favorite location 
and we'll be glad to post it on myPod. So, what are you waiting for? 

Seattle, Washington 

Me and my iPod in Seattle! You can see the Space Needle. You can't see the 628 coffee shops. 

j 

Birmingham, England 

Here arc some iPod photos around Birmingham. We've obviously gol some passionate folks over here 
who love their iPods. Check out the classic red British telephone box! 




Excellent work. 
The logo looks great. 
Youve got a kick-ass 
myPod website here! 

O 
o 


you are here ► 
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questions about images 



Dumb Questi 


9ns 


Do I really need to know all this stuff about image formats 
to write good web pages? 

No. You can build great web pages without any images. 
However, images are a big part of the Web, so some knowledge of 
how images work can really help. Sometimes just an image or two 
makes the difference between a good page and a great one. There’s 
a lot to know about images, but it's easy to learn as you go. 


Why can’t I just make the logo background color solid and 
match the color to the web page? 

You could do that too, but there is one disadvantage: if there 
are other things in your web page that are showing through the 
transparency, then they won’t be seen with the solid color version. 

You haven’t seen any examples of this yet, but when we get into CSS, 
you will. 


Why does the text need its edges softened? 

Check out the two versions of the myPod logo below: 

myPod 



You’ll see the top version has very hard, jagged edges and is less 
readable. This is the way text is displayed by default on a computer 
screen. The second version has had its edges softened using a 
technique called anti-aliasing. Words that are anti-aliased on a 
computer screen are more readable and more pleasant to the eye. 

So where does the matte come in? 

The process of anti-aliasing softens the edges relative to the 
background color. If you put the bottom version of the logo (from the 
previous Q&A) against a colored background, you’d see it has white 
edges in it. The Matte option in Photoshop Elements allows you to 
specify the color of the background that the text will be placed on, so 
when the text is softened it is done so against that color. 

Does this technique just work for text? 

No, it works for any lines in your graphics that might result in 
“jaggies.” Check out the circle in the myPod logo; it was matted too. 


What if I change my background color after I make the 
matted version? 

A slight variation in your background color probably wouldn't be 
noticeable; however, if you change the color dramatically, you’ll have 
to recreate the PNG with a new matte color. 


II you’re placing a 
transparent image in 
your wet page, make 
sure tke matte color oi 
tke image itiatckes tke 
tackgrounct color oi your 
wet page. 


You 


can use 


pm 


or 


GIF lormat lor your 
transparent image. 
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BULLET POINTS - 

■ Use the <img> element to place images in your 
web page. 

■ Browsers treat <img> elements a little differently 
than other HTML elements; after reading the 
HTML page, the browser retrieves each image 
from the web server and displays it. 

■ If you have more than a couple of large images 
on a web page, you can make your web page 
more usable and faster to download by creating 
thumbnails—small images that the user can click 
on to see the large version of the image. 

■ The <img> element is an inline element, which 
means that the browser doesn’t put a linebreak 
before or after an image. 

■ The src attribute is how you specify the location 
of the image file. You can include images from 
your own site using a relative path in the src 
attribute, or images from other sites using a URL. 

■ The alt attribute of an <img> element is a 
meaningful description of the image. It is 
displayed in some browsers if the image can’t 
be located, and is used by screen readers to 
describe the image for the visually impaired. 

■ A width of less than 800 pixels is a good rule 
of thumb for the size of photo images in a web 
page. Most photo images that are created by 
digital cameras are too large for web pages, so 
you'll need to resize them. 

■ Photoshop Elements is one of many photo 
editing applications you can use to resize your 
images. You can also use one of many free 
online tools to resize images. Just search for 
“free online image editor.” 

■ Images that are too large for the browser make 
web pages difficult to use and slow to download 
and display. 


JPEG, PNG, and GIF are the three formats 
for images that are widely supported by web 
browsers. 

The JPEG format is best for photographs and 
other complex images. 

The GIF or PNG format is best for logos and 
other simple graphics with solid colors, lines, or 
text. 

JPEG images can be compressed at a variety 
of different qualities, so you can choose the best 
balance of quality and file size for your needs. 

The GIF and PNG image formats allow you to 
make an image with a transparent background. If 
you put an image with a transparent background 
in a web page, what’s behind the image, such 
as the background color of the page, will show 
through the transparent parts of the image. 

GIF and PNG are lossless formats, which means 
the file sizes are likely to be larger than JPEG. 

PNG has better transparency control than GIF, 
and allows many more colors than GIF, which is 
limited to 256. 

PNG has three different size options: PNG-24 
(supports millions of colors), PNG-16 (supports 
thousands of colors), and PNG-8 (supports 256 
colors), depending on your needs. 

In Photoshop Elements, use the Matte color 
menu in the “Save for Web” dialog to choose 
the right color for softening the edges of your 
transparent PNG or GIF image. 

Images can be used as links to other web pages. 
To create a link from an image, use the <img> 
element as the content of an <a> element, 
and put the link in the href attribute of the <a> 
element. 
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more left brain goodness 



HTMLcross 

It’s time to give your right brain another break and put that left brain 
to work. All these words are HTML-related and from this chapter. 


2 








10 









Across 

I. With JPEG, you can control this. 

3. Most web browsers retrieve images this way. 

5. PNG and GIF have it, JPEG doesn’t. 

8. Miles you can draw with a pencil. 

10. Web server makes a request for each one of 
these. 

II. Smallest element on a screen. 

12. You used Photoshop Elements to do this to 
images. 

13. Lovable MP3 player. 

14. Better for solid colors, lines, and small text. 


Down 

2. The alt attribute improves this. 

4. Small images on a page. 

6. Technique for softening edges of text. 

7. The larger the image, the_it takes to 

transfer it. 

9. Better for photos with continuous tones. 
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WVUCM 



氺 




Congratulations: you’ve been elected “Grand Image Format Chooser” of the day. For 
each image below, choose the format that would best represent it for the Web. 


JPEG or PNG or GIF 



A p^o*to wi*tli lo*ts o( do^tmuous 
shades o-f yay. 



I CAUTION 

O^ly a double o( dolov-s wrbh some ■■ 

七以七 ; dc-fi^i*tclv 3 o\r ■ ■ 

WATCH OUT FOR 

HOT CHOCOLATE 

No *bra 灼 PK^ 你吵七 

yield a smaller -file- 



A pho*to wi*tli lots o-f dolov-s ； 
dc-f*mi*tcly d JPE^ o\r PK ^； 
i-f you d *tv"a^spa\rc^*t 
badk^\rou^d ； w’rth PK^. 




Jus*t a simple blddk Bv\d v/iii*tc 

i 匕。的 ; a o\r ^|F l-f you wed 

■tv-a^spav-c^^y, you 

anti — alias— cm *thc cdjcs, a^d PK^ 
would be bc*t*tcv -fov 



This ima^e is bo\rdc\rl’me. | 七 hds 
lots o-f doirrtmuous dolors (JPE 今 ), 
bu*t is also sli^rtly 
(今 IP) a^d you may wa^*t *to 
use *tliis \ y \ a way that v-c^uiv-cs 
brBY\SYBrCY\ty (p^)- 
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exercise solutions 


%|harpen your pencil 
彎 、 Solution 


Here’s a "Sharpen your pencil〃that is actually about pencils (oh, and images too). 
This exercise involves a bit of trivia: Given a typical, brand-new pencil, if you drew 
one continuous line with it, using the entire pencil up, how long would the line be? 


What’s that got to do with images? To find the answer, you had to write some 
HTML. The answer to this trivia is contained in the image that is at the URL: http:// 
wickedlysmart.com/hfhtmlcss/trivia/pencil.png. Your job was to add an image to 
this HTML and retrieve the answer. Here’s our solution. 


<html> 

<head> 

<title>Sharpen your pencil trivia</title> 

</head> 

<body> 

<p>How long a line can you draw with the typical pencil ?</p> 
<P> 

<img src= n http : //www. headf irstlabs . com/trivia/pencil. gif’▼> 

<々> 小 

</body> 

</html> 


|-f you pu 七 you 
^v\s\ncy you load Ac 


see 


Sharpen your pencil trivia 

〕S 0. ^ file:///chapter5/trivia.html 


How long a line can you draw with the typical pencil? 



The tyfic^ new pencil can 
draw a line 35 miles Jong. 



Source: http://www.papermate.com 
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fit 


SpLviiQH 


Here are the results of having a broken image in a few different browsers. In most cases, the 
browser is able to use the extra alt attribute information to improve what is displayed. Why do 
we care? After all, this is an error in a web page; we should just fix it, right? Well, in the real 
world, things are often not ideal; sometimes things break, Internet connections go bad in the 
middle of a page load, or visually impaired users need to hear what is in the image, because 
they can’t see it. 



X Pencil line 35 miles long 


\ IE- displays *tKc al*t 

attribute 七 e% 七 alon^ W\{\\ 
bvokcr^ idon- 


« o o 


Sharpen your pencil trivia 


(, http:///chapter5/trivia/trivia.html 


How long a line can you draw with the typical pencil? 



Sa-fav-i ov\ 
doesn't make <y>oA use 

of alt attribute 

-fyom bv-okcr\ images. 




Sharpen your pencil trivia 


匕 Sharpen your pencil L.. 


m 


file:///chapter5/trivia/tr ivia.html 


(W 


Search with Coc 


How long a line can you draw with the typical pencil? 
[Pencil line 35 miles long 


Ofcv-a or\ Mad 
displays *tKc alt 
ativibu 七 e 七 wt. 


□ 


O Zoom (10096) 




(J Sharpen your pencil trivia 

夺 C fi : 、 file:///chapters/trivia/trivia.html 

How long a line can you draw with the typical pencil? 

两 T\ 

TKc CKvomc bvoy/sev displays a bvok ⑼ 
ima^e ido^, but docs^t display 
m i\\t a\i atbribu 七 r 


« o o 


Sharpen your pencil trivia 


Sharpen your pencil trivia 




[.J /chapter5/trivja/trivia.html ▼ G 1 

Google Q ) 舍 

D- 

4^ 

▼ 


How long a line can you draw with the typical pencil? 
Pencil line 35 miles long 


Fiv-c-fo% OY\ 七 he Mad 
jus 七 displays i\\t 

*m i\\t a\i a*t*tnbu*tc. 


x 
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Your task this time: open the file “chapter5/testimage/eye.jpg” in Photoshop Elements. Open the “Save for Web” 

dialog and fill in the blanks below by choosing each quality setting for JPEG (Low, Medium, High, etc.), and also try 

PNG-24 and GIF. You'll find this information in the preview pane below the image. Once you’ve finished, determine 

which setting makes the most sense for this image. K/ , », , , ^ 

/Vote that youv humbcvs may di-rfcv* 

Oh the vcv-sioh o-P sc4--twol\rc you av-c usihj. 



pid you notice 

\)OYJ 


imd^e e\uali-ty 

degrades as 
vou -rvow 

JP £ 今 Max.imur 

to Lo>w? 




Format Quality Size Time Winner 


PN& - Z4 


H/A 


3ZK 


\$ seconds 



JPE& 


Maximum 


Z1K 


8 seconds 



JPE& 


High 


6K 


$ seconds 



4PE& 


Medium 




Z seconds 



JPE& 


Low 


Vk 


1 second 



(MF 


N/A 


IVk 


9 seconds 



|s "the wirmev* vcally /Medium? Moi, nedessavily. I 七 all depends or\ wliat youv- needs av-c. l-f you y/arrt a 
vcally 七 hen you mi # 七 >wa 朽七 \/cv-y l-f you v/a^-t the -fas-tes-t possible site, 七 he 竹 

■tv-y Low. Wc^c diiosen Medium bedduse 'rb is 3 nidc brBdto(( m s'izjC vcv-sus "tlie quality of "tlic imd^e- 
You may "tWmk Low is ^ood cr»ou^K, ov- 七 1 ^七 its >wov*"tK "the Quality up to W\o\\- So, its all 

vevy subjective. Ov\t is (ov suve, Kowcvcv -： dr\d ^|F dor /七 v/ov-k vevy well +ov* "tliis imd^e 
(wiiidli should ho*t be 3 suv-pv-isc)- 
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If you look in the “html” folder with the chapter examples, you’ll find all of the single photo pages 
already there, except one: the page for “seattle_downtown.jpg”. Create a page called “Seattle— 
downtown.html" in the “html” folder, and test it out. Get this working before you move on. 

Here’s the answer: 

-tKc ttTMU 七仏以 e should 
be called 一 dovmWAW . 

<html> 

<head> 

<title>myPod : Seattle Downtown</ title> 

<style type= n text/css"> body { background-color : #eaf3da; } </style> 

</head> 



©OLviiOH 


<body> 

<hl>Downtown Seattle</hl> 


<p> 

<img src= n ../photos/seattle_downtown.jpg M alt= M An iPod in downtown Seattle, WA M > 

</p> 

</body> 

</html> 


This Jile should go i, ihc 

html toldcv- uhdev w mypod w . 



Here’s "the -test d\rivc- 



M# /^cruptrrS/myp<M]/himi/f#atrif.downtown html 


Downtown Seattle 
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HTMLcross Solution 
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iharpen your pencil 

Solution 


Here’s how you add the image "seattle.jpg” to the file "index.html”. 


<h2>Seattle, Washington</h2> 

<P> 

Me and my iPod in Seattle! You can see rain clouds and the 
Space Needle. You can't see the 628 coffee shops. 

</p> 

<P> 

<img src= n photos/seattle.jpg" alt= M My iPod in Seattle, WA M > 

</p> 
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What else is there to know about HTML? You re well on your way to 
mastering HTML. In fact, isn’t it about time we move on to CSS and learn how to 
make all this bland markup look fabulous? Before we do, we need to make sure your 
HTML is really ready for the big leagues. Don’t get us wrong, you’ve been writing first- 
class HTML all along, but there are just a few extra things you need to do to make it 
“industry standard” HTML. It’s also time you think about making sure you’re using the 
latest and greatest HTML standard, otherwise known as HTML5. By doing so, you’ll 
ensure they’ll display more uniformly across all browsers (at least the ones you’d care 
about), not to mention, they’ll play well with the latest i-Devices (pick your favorite). 
You’ll also have pages that load faster, pages that are guaranteed to play well with 
CSS, and pages that are ready to move into the future as the standards grow. Get 
ready, this is the chapter where you move from web tinkerer to web professional. 
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writing standard html 


Hey guys, the 
boss just sent an email. 

Before we add CSS to the Head 
First Lounge, he wants us to make sure 
our HTML is ready for prime time. 



Jim: Ready for prime time? 

Frank: Yeah, you know, make sure it’s totally legit and 
ready for HTML5. 

Jim: Our HTML is just fine.. .here, look at it in the 
browser. It looks beautiful. 

Joe: Yeah, that’s what I think.. .he’s just trying to give us 
another thing to do. 

Frank: Actually guys, I hate to admit it, but I think the 
boss is right on this one. 

Jim, Joe: Huh? 


Frank: Up until now we’ve pretty much ignored the fact 
that there are standards for this stuff. Not to mention there 
are different versions of HTML, like HTML 4.01，and 
now ， HTML5. Are we doing everything we need to make 
sure we’ve got HTML5 covered? 

Joe： Gome on, this is just going to mean even more work. 
We’ve already got enough to do. Really, the page looks fine; 
I’ve even tested it on some of the newer devices. 


Frank: That may be, but what I’m saying is that I think 
this will help us do less work in the future. 

Joe: Oh yeah? How so? 
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Frank: Well, if we make sure our HTML is up-to-date with current 
standards, we won’t have to make as many changes down the road. We 
should also make sure everything else is correct; you know, our syntax 
and all that. There are so many different browsers and versions of those 
browsers that if we’re making mistakes in our HTML, then all bets are off 
in terms of how our pages will look in different browsers. And when we 
start adding presentation to HTML with CSS, the differences will get even 
more dramatic if our HTML isn’t up to snuff. 

Joe: So, by making sure we’re adhering to the “standard,” we’ll have a lot 
fewer problems with our pages displaying incorrectly for our customers? 

Frank: Right. 

Jim: If it reduces the number of 3 a.m. calls I get, then that sounds like a 
good idea to me. 

Joe: All right, how do we start? Don’t we adhere to the standards now? 
What’s wrong with our HTML? 

Frank: Maybe nothing, but the boss wants to be current with HTML5, 
so we need to figure out which version of HTML we’re using and if it’s 
not HTML5, what we need to do to get there. And, when we’re done, life 
should be much easier when we start using CSS. 


Browsers all do a pretty good job of consistently displaying 
your pages when you write correct HTML, but when you make 
mistakes or do nonstandard things in your HTML, pages are 
often displayed differently from one browser to another. Why 
do you think that is the case? 
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html timeline 



A Prief History of HTML 


BTiyiL 10-2.0 


BTJVIL3 


BTJVIL4 


These were the early days; you 
could fit everything there was 
to know about HTML into 
the back of your car. Pages 
weren’t pretty, but at least 
they were hypertext enabled. 
No one cared much about 
presentation, and just about 
everyone on the Web had 
their very own “home page.” 
Even a count of the number 
of pencils, paperclips, and 
Post-it notes on your desk 
was considered u web content” 
back then (you think we’re 
kidding). 


The long, cold days of the 
“Browser Wars.” Netscape 
and Microsoft were duking it 
out for control of the world. 
After all, he who controls the 
browser controls the universe, 
right? 

At the center of the fallout 
was the web developer. 

During the wars, an arms 
race emerged as each browser 
company kept adding their 
own proprietary extensions 
in order to stay ahead. Who 
could keep up? And not 
only that, back in those days, 
you had to often write two 
separate web pages: one for 
the Netscape browser and 
one for Internet Explorer. Not 
good. 


Ahhh.. .the end of the Browser 
Wars and, to our rescue, the 
World Wide Web Consortium 
(nickname: W3C). Their plan: 
to bring order to the universe 
by creating the ONE HTML 
“standard” to rule them all. 

The key to their plan? 

Separate HTML’s structure 
and presentation into two 
languages — a language for 
structure (HTML) and a 
language for presentation 
(CSS) — and convince the 
browser makers it was in their 
best interest to adopt these 
standards. 

But did their plan work? 

Uh, almost.. .with a few 
changes (see HTML 4.01). 


1989 


1991 


1995 


1998 
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,, standards and all that jazz 

with this ou^r goal is h> ttT/WL^. As always, -the 

wo\rld keeps n,ovih9 ； so well also talk about whev-e thmas avc 1 


3 om 3. 


BTjvil 4.01 


WTi^L l.o 


[TJVIL5 


The good life: HTML 4.01 
entered the scene in 1999, and 
was the “must have” version of 
HTML for the next decade. 

4.01 wasn’t really a big change 
from 4.0; just a few fixes were 
needed here and there. But 
compared to the early days of 
HTML (when we all had to walk 
barefoot in six feet of snow, uphill 
both ways), HTML 4.01 allowed 
us all to sleep well at night 
knowing that almost all browsers 
(at least the ones anyone would 
care about) were going to display 
our content just fine. 


Just as we were all getting comfortable, 
a shiny object distracted everyone. 
That shiny object was XML. In fact, it 
really distracted HTML, and the two 
got hitched in a shotgun marriage that 
resulted in XHTML 1.0. 

XHTML promised to end all the 
woes of the Web with its adherence to 

strictness and new way of doing things 

mos*t 

The only problem wasf people ended 
up hating XHTML. They didn’t want 
a new way to write web pages, they 
just wanted to improve what they 
already had with HTML 4.01 • Web 
developers were far more interested 
in HTML’s flexibility than XHTML’s 
strictness. And, more and more, these 
developers wanted to spend their time 
creating web pages that felt more like 
applications than documents (more on 
web apps later) … 


Of course, with no support from the 
community, the marriage didn’t end 
well and was replaced by new version 
of HTML named HTML5. With its 
support for most of the HTML 4.01 
standard, and new features that reflect 
the way the Web has grown, HTML5 
is what developers were looking for. 
And, with features like support for 
blog-like elements, new video and 
graphic capabilities, and a whole new 
set of capabilties aimed at building 
web applications, HTML5 was 
destined to become the standard. 

To be honest, the divorce of HTML 
and XML took a lot of people by 
surprise, leading to confusion about 
what HTML5 actually is for a while. 
But that’s all been sorted out, so read 
on to find out what HTML5 means to 
you, and how you can join in the fun. 


1999 


2001 


2009 2012 



And what will happen in the future? Will we all 
be going to work in flying cars and swallowing 
nutrition pills for dinner? Keep reading to find out. 
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browsers and html versions 



The Bvowscv 

This week’s interview: 

Why do you care so much about 
which HTML version I'm using? 


Head First ： We’re glad to have you here, Browser. As 
you know, “HTML versions” have become a popular 
issue. What’s the deal with that? You’re a web browser, 
after all. I give you HTML and you display it the best 
you can. 

Browser ： Being a browser is tough...there are a lot 
of web pages out there, and many are written with old 
versions of HTML or with mistakes in their markup. 
Like you said, my job is to try to display every single 
one of those pages, no matter what. 

Head First ： So what’s the big deal? You seem to be 
doing a pretty good job of it. 

Browser ： In some cases, sure, but have you ever 
looked at your pages on a lot of different browsers? 
When you are using old or incorrect markup, your page 
may look great on one browser, but not so great on 
another. 

Head First ： Really? Why is that? Don’t you all do the 
same thing? 

Browser ： We do a great job of doing the same thing, 
when we’re displaying correct and up-to-date page 各 . Like I 
said, when you venture into pages that aren’t written 
well, then things get a lot dicier. Here’s why: all of us 
browsers have the HTML specification to tell us how to 
display correct HTML, but when it comes to incorrect 
HTML, we just wing it. So, you might get very different 
behaviors on different browsers. 

Head First ： Ahh. So, what’s the solution to this mess? 
We definitely want our pages to look good. 

Browser ： Easy. Tell me up front which version of 
HTML you’re using. You’d be surprised how many 
pages don’t even do that. And make sure your page 
doesn’t contain any errors; you know, mismatched 
markup tags, that kind of thing. 


Head First ： How do we tell you which version we’re 
using? Especially now that we’re all moving on to 
HTML5. 

Browser ： Well, HTML5 is actually making things a 
little simpler. 

Head First: Really? How is a new version of HTML 
helping? I would have thought yet another version 
would just make things even more difficult. 

Browser ： It’s true that any new version of a language 
causes growing pains as everyone tries to catch up with 
the latest standard. But HTML5 simplifies the way you 
tell me the kind of HTML you’re using. The HTML5 
standard is also documenting many of the errors that 
can occur in web pages, so that all the browsers can be 
more consistent about how they handle those errors. 

Head First ： Oh, so does that mean we don’t have 
to worry about making errors when we’re writing our 
HTML? 

Browser ： No! Just because we can handle errors 
better doesn’t mean you can be sloppy. You still want 
your page to be consistent with the standard and 
written without errors. If you don’t, you might get 
inconsistent results across browsers, and let’s not forget 
the browsers on mobile devices, too. 

Head First ： Back to how we tell you what version 
we’re using? 

Browser ： Yeah, that used to be a total pain in the... 

Head First ： Uh, watch it, this is a PG-rated audience, 
and we’re running out of time, quickly! 

Browser ： Okay, you can tell me all about the version 
of HTML you’re using with a doctype. It’s a little bit 
of “markup” you can use that goes at the very top of 
your HTML file. So, given we’re out of time, go check 
it out! 
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cjiaeojogy 


igging and found some old HTML 4.01 and XHTML 1.1 
pages. These pages use a doctype, at the very top of the HTML file, to tell 
the browser which version of HTML they’re using. We’ve snipped out a 
couple of doctypes for you to look at. Check them out below … 



TW»S »S 

U *tw»s vay ^ 

i\\t V)VO>fiSCV. 


TV^is 

仏 a 七 <^^1> 
is 七 he v-oo*t 
(<(Vs 七）七 
•m yo^r pay- 


TVis jus 七 

HTML 午 .01 
s-ta^dav-d 
is publicly 
available- 


This pa\rb says wcVc 
us'm^ HTML vcv-sio^ 

午 .01 扣 d ihat HTML 

markup is *m 

palish. 



You type -this all 
OY\ OY\t I me, ov- i-P you 
you da 灼 add a 
v-ctu\nr» >/hcv-c v/c did. 
Jus*t nrvdke SUVC you 
oy\\y p\rcss Rctuv-^ *m 
between *thc pairb m 
•the quotes. 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN' 
"http : //www.w3.org/TR/html4/strict.dtd n > 




Uohu *tv^a*t -tWis »S NOT ^TML 

a 七七 he v/WiA *tclls Y ou 

七 Wis is somc-t^'rn^ d'iWcv-cy\t 


This po'm*b *to a -Pile 
*tha 七 idcr>*ti-pics -this 
pav* 七 i 乙 ulav* s*ta^dav*d. 


Just |-,ke tte HTML VOCT^ 
^'»s »s a \>ubl'i6 do6umcr»*t 七 W 


|*t’s still a VCV-sioir\ o-f 

HTML—ar» )<ML vcv-sio^. 




r 


It's (o^ ihc XttT/VIL l.l 
vcvsioh of X^TyVlL. 


<!DOCTYPE html 

PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http : //www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

it i^as a URL -to -tKc 

^ov move oi^ yHTWIL*，dKcdk ou*t 




dc-firvition o( )(HTA1L I I- 
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guess the doctype 


^harpen your pencil 


Rather than tell you the doctype definition for HTML5, we thought you might want 
to have fun working it out on your own. Take another look at the HTML 4.01 doctype 
definition below: 





七 iVis s*bay\dav-d »s 
piAbl^ly available. 


This pa\r*b says wcVc us'mj HTML 

version 午 .01 and that this 

mav-kuf is w\ri*btc 灼 m R^lisiv 



<!DOCTYPE html PUBLIC ， ▼- //W3C//DTD HTML 4.01//EN" 


"http : //www.w3.org/TR/html4/strict.dtd M > 

t 

This pom*ts *to a Lie *tKa*t / 
idcr>-ti-pics -this s*tar>dav*d- 


Remember, the doctype definition belongs at the top of your HTML file and tells the browser 
the type of your document — in this case, HTML 4.01. By using a doctype, the browser is able 
to be more precise in the way it interprets and renders your pages. 

So, using your deductive powers, what do you think the doctype definition for HTML5 looks 
like? Write it here (you can refer back to your answer when we cover this on the next page, 
and no peeking at the answer!): 
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The wew, awd improved, HTML5 doctype 

Okay, get ready for it. Here’s the HTML5 doctype: 


<!doctype html> 




It s jus*t OhC lihCj doh^t miss i-fc. 


Md i-t^s \rcally simple/ 


How close was your answer in the Sharpen Your Pencil? This is much simpler, 
wouldn’t you say? And, wow, you might even be able to remember it without 
having to look it up everytime you need a doctype. 


Wait, isn't this supposed to tell 
the browser the version? Wheres the 
version number? Is that a typo? 


Ou\r sympathies 
"to those who had 
the old doctype 
oh 

thci\r faLs -to 
v-Cmcmbcv- it. 



Good point. No, it’s not a typo, and let’s step through why: you 
know the doctype used to be a complicated mess full of version 
numbers and ugly syntax. But with the arrival of HTML5, the 
doctype was simplified so that now all we have to do is tell the 
browser we’re using “html ”； no more worrying about specific 
version numbers or languages or pointing to a standard. 

How can that be? How can we just specify “html” without the rest? 
Doesn’t the browser need that other information? Well, as it turns 
out, when the browser sees: 

<!doctype html> 

it assumes you’re using standard HTML. No more getting all hung 
up on version numbers or where the standard is located; in fact, the 
HTML standard has become a “living standard,” meaning that 
it will continue to grow and morph as needed, but without fixed 
version numbers. Now, you’re probably thinking, “What exactly 
does a living standard mean? How is that going to work?” You’ll see, 
on the next page... 
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html is backwards compatible 


HTML, the wew "living standard" 


You heard us right...rather than continue to crank out version 6, 7, 8 of HTML, the 
standards guys (and gals) have turned the specification into a living standard that will 
document the technology as it evolves. So, no more version numbers. And you can stop calling 
it HTML5 because it’s just “HTML” from here on out. 


Now, you’re probably wondering how this is going to work in practice. After all, if the spec is 
continually changing, what does that mean for the poor browsers? Not to mention, for you, 
the web developer? One key to this working is backwards compatibility. Backwards compatibility 
means that we can keep adding new stuff to HTML, and the browsers will (eventually) 
support this new stuff, but they’ll also keep supporting the old stuff. So the HTML pages 


you’re writing today will keep working, even after new features have been added later. 


Works ot\' 

11, Five-fox. 
10, Sa-fav-i 
Opera II 


iVovks oy \ all 
those … pi us 
灼 cv/ vcv-sioi^s 




iVovks o 灼 all 
… plus 

灼 cv/ VC\rsioir\S 




(s/o-tidc eadh Y\t^i vcv-sio^ is a little bi^cv- b 杜 ause 

studs added, but old stuW siill works! 


lVo\rks oy\ dll those... 
plus y\cvi 

bv-oy/sev-s y/c haven't 

yci! 



V^u\r HTA/JL -P\rorw "today still 
wo\rks because -the old stu-f-f 
still supported. 


is 



Dumb Quest? 


9ns 


So what happens if the spec 
changes tomorrow? What do I do? 

A- 

厂 V If you’re writing solid HTML today and 
the spec changes tomorrow to incorporate 
a new element, then you can just keep 
on doing what you’re doing. It's up to you 
whether you want to use that new element 
or not. 


If the spec changes something you’re 
already doing, like the way an element or 
attribute works, then browsers are supposed 
to continue to support the old way you’re 
using it as well as the new way. That’s what 
“backwards compatibility” means. Now, it is 
obviously a good thing if existing features 
are changed as little as possible, and if you, 
as a web developer, keep up-to-date on the 
spec and change your pages as the spec 
changes, but the idea is that your HTML will 
continue to work as the spec changes. 


What exactly is a spec, anyway? 

A- 

The specification is the document that 
specifies what the HTML standard is; that is, 
what elements and attributes are in HTML, 
and more. This document is maintained by 
the World Wide Web Consortium (W3C, for 
short), but anyone can contribute to it and 
have a say in how the standard is developed. 


228 Chapter 6 

























standards and all that jazz 



Adding the document type definition 

Enough talk, let’s get that doctype in the HTML. 



add *rt as *tWn^ 


You v/\ri*tc DOCTVPE 
< ov dod*tyfc- Bo*th wovk. 


<!doctype html> 

<html> 

<head> 

<title>Head First Lounge</ title> 

</head> 

<body> 

<hl>Welcome to the New and Improved Head First Lounge</hl> 

<img src= n drinks • gif’▼> 

<p> 

Join us any evening for refreshing 

<a href= n elixir .html">elixirs</ a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 

</p> 

<h2>Directions</h2> 

<p> 

You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 

<a href= n directions .html n >detailed directions</a>. 

Come join us! 

</p> 

</body> 

</html> 
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testing with a doctype 


The doctype test drive 

Make the changes to your “lounge.html” file in the 
“chapter6/lounge” folder and then load the page in your browser. 



Wbv/, y\o Well, A\dv\ i 

veally all 

docile docs *»s let -tKc Woy/scr l^ov/ 
-for SUV-C Y ou, V" e usm 3 


© o o 


Head First Lounge 


Welcome to the New and 

Improved Head First Lounge 


I 


===== 一 — bc a 

B YOWS (Bring Your Ow, W^Sc^ miS — ^ « 

Directions 

Sit d s= y ™ hdp 






Add a doctype to the "directions.html" and “elixir.html” file as well. Go ahead and give them a good 
test. Just like “lounge.html”，you won’t see any fireworks (but you might sleep a bit better tonight). 
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This week’s interview: 

What’s the big deal about HTML5? 


Head First: HTML5, you’re the “latest and greatest” 
version of HTML that everyone’s yammering on about, 
but our readers want to know what’s so great about you. 

HTML5 ： First off, I’ve got a bunch of new elements and 
some new attributes too. 

Head First ： We don’t seem to be using any of those yet, 
are we? 

HTML5 ： All the elements you’re using are part of my 
standard now, so you’re using HTML5 elements. But no, 
you’re not using any of the new ones yet... 

Head First ： Why not? Shouldn’t we be using all the 
newest elements as soon as possible? 

HTML5: Not necessarily. Remember (from Chapter 3): 
always use the right element for the job! And my newest 
elements have specific jobs. Some of them are for adding 
more structure and meaning to your page. Like my new 
〈 article 〉 element, which is specifically for things like 
blog posts and news articles. 

Head First ： We could have used that in Chapter 3 for 
Tony’s blog, right? 

HTML5 ： That’s true.. .I’m sure you’ll add it later on. 

Head First ： I’m sure our readers are wondering, since 
they’re learning HTML in this book, if they need to go 
learn HTML5 instead? 

HTML5: No! HTML5 is just the next evolutionary step, 
everything they’ve learned is exactly the same in HTML5. 
HTML5 just adds some new stuff. In fact, we should stop 
saying “HTML5.” I’m just the latest version of HTML, 
so call me HTML. Saying HTML5 at this point is just 
confusing. 

Head First ： Wait, after all the hype around HTML5, are 
you really suggesting we do away with your name? 

HTML5: 1 am. You already know I’m a living standard 
and version numbers are dead. Well, I’m a living standard 
for HTML, not HTML5. 


Head First ： Got it. Our readers really should just 
continue learning HTML5 — uhh sorry, HTML — and 
everything they’ve learned so far has been relevant. Not to 
mention all the new stuff ahead that they’ll be learning is 
the latest and greatest HTML technology. 

HTML5: Exactly. 

Head First ： I have to ask, though, I heard some of your 
new stuff is for building web apps. How does that relate? 

HTML5 ： The biggest thing is that I’m not just for making 
web pages anymore; I’m designed for making full-blown 
web applications. 

Head First ： What’s the difference? 

HTML5 ： Web pages are mostly static pages. You’ll have 
some images and a bunch of links, and a few nice effects 
here and there, like on the menus, but for the most part 
pages are for reading. Web applications, on the other 
hand, are for interacting with, doing stuff with. Like the 
applications on your desktop, only with web applications, 
you’re doing stuff on the Web. 

Head First ： Gan you give me an example? 

HTML5: Social media apps, mapping apps, games.. .the 
list is endless. 

Head First ： We couldn’t do that stuff before HTML5? 

HTML5 ： Well, you could do some of it, but a lot of the 
features required to build those kinds of applications are 
being standardized for the first time with me. Before, if 
they existed at all, they were somewhat haphazard. 

Head First ： I don’t think we’re going to be building any 
apps in this book, though. 

HTML5 ： No, but check out Head First HTML5 
Programming. That book is all about building web 
applications with me! 

Head First ： We will! Thanks for being here, HTML5. 
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how to validate your html 


Okay, that wasn’t bad; now 
were telling the browser 
were standard HTML. 




Jim: Yeah, really easy. But also 
a little anticlimactic.. .we put this 
doctype at the top of our file to tell 
the browser our page is HTML, but so 
what? Nothing really changes. 

Frank: Right, nothing you can see changes, but it 
does communicate to the browser that we’re using 
standard HTML. And the browser can use that 
information to its (and our) advantage. Plus, the boss 
wanted us to be writing totally legit HTML, and for 
that we need the doctype. 

Jim: Okay, is that it, then? Are we now writing 
industry standard HTML? 

Frank: As far as I know, but this is where it gets 
interesting. The one thing that can trip us up now 
is errors we might have introduced into the page. Say 
we forgot a closing tag? Or had a typo in a tag name? 

n: Oh right, well, wouldn’t we know it if we did? 

Frank: Not necessarily; the browser is pretty good at 
winging it when it sees errors. 


Jim: How about I get the guys together, and we do a review 
of the entire page? 

Frank: You may not need to.. .there are tools out there to help validate 
the page. 


Jim: Validate? 


Frank: Right, to go through the page and make sure all the markup is 
valid. Make sure we’re keeping to the standard. It’s a bit like a spell checker 
for HTML. 

Jim: Sounds like a good idea. Where do we get these tools? 

Frank: The standards guys over at the W3C have a validator, and it’s free. 
Jim: Great, let’s do it. 
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Meet the W?C validator 

Let’s check out the W3C validator and have it validate our 
lounge files. To follow along, just point your browser to 

http :/ /validator.w3.org. 




alld aW located at 咖 


Thcv-c ave *thv-cc ^ 
you tBY\ dKcdk youv- 

WTML ： 

(I) 1^ Y ouv ^ iAfeb, 

you day> bl^ m UKU 

V,cvc U tWcM C^k wtw,, 

and 如 st^\u V.II 代七 vmcvc 7 雜 

HTML and Acdk vt. 




The W3C Markup Validation Service 


kSl http://val idator.w3 .org/ 


15^1 C (W Google 


W5C 


MarkUP C Yfi 嫩冗您难纪 XHTML,...) of Web documents 


Validate by URI Validate by File Upload Validate by Direct Input 

Validate by URI 
Validate a document online: 


Address: 


More Options 


Check 


(Z) yi>u dhoosc 七 he sedo^d 
tab, a^d upload a -file -Pv-om youv- 
dorwpu-tcv-. W\\cy\ you^vc selected 
the -Pile, dlidk Chcdk, a^d the 
b\roy/scv- y/ill upload the pay -Pov 
the sevvide -to dhedk. 


(Z) Or, dhoosc "the 七 hivd 
tab, ay\d dopy a^d pas-tc youv- 
ttTML 'm-fco -the (t ov-m OY\ 

-that tab. Thcr» dick Chcdk 
artd the sev-vide will dhcdk 
youv- HTML. 


I his validator checks the markup validity of Web doyGments in HTML, XHTML, SMIL, MathML, 
etc. If you wish to validate specific content such as/iSS/Atom feeds or CSS stylesheets, 
MobileOK content, or to find broken links, there ?/e other validators and tools available. 



mozilla 


The W3C validators/ire developed with assistance from the Mozilla 2 g3i 
Foundati^J ； and supported by community donations. i^rjm 

Dr^eand help us build better tools for a better web. 


-i<3me About... News Docs Help & FAQ Feedback Contribute 



open source 


This service runs the W3C Markup Validator, yJL2. 
COPYRIGHT © 1994-2010 W3C® (MIT, ERCIM, KEIO), 
ALL RIGHTS RESERVED. W3C LIABILITY, TRADEMARK, 
DOCUMENT USE AND SOFTWARE LICENSING RULES APPLY. YOUR 
INTERACTIONS WITH THIS SITE ARE IN ACCORDANCE WITH OUR PUBLIC 

AND MEMBER PRIVACY STATEMENTS. 
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validating the lounge 


Validating the Head First Lounge 

We’re going to use the third tab, “Validate by Direct Input” to validate 
the “lounge.html” file. That means we need to copy and paste the 
HTML from “lounge.html” into the form on that tab; keep following 
along and give it a try … 


r> n 


j (+ fflhttp://validator.w3.or9/#Yalidate_by_input 


The WiC Markup Validation Service 


Google 


Markup Validation Service 

Check the markup (HTML, XHTML, ...) of Web documents 


Validate by URI Validate by File Upload Validate by Direct Input 

Validate by direct input 

Enter the Markup to validate: _ 

<!doctype html> 

<html> 

<head> 

<title>Head First Lounge</title> 

</head> 

<body> 

<hl>Welcome to the New and Improved Head First Lounge</hl> 
<img src= drinks.gif > y 

<p> 

Join us any evening for refreshing 

<a href= elixir.html M >elixirs</a>, conversation and 

mqybp a game or two of <em>Dance Dance Revolution</em>. 


More Options 


Check 



This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML etc If you 
wish to validate specific content such as RSS/Atom feeds or CSS stylesheets. MoblteOK _«'m or to find 
broken links, there are other validators and tools available. 


mozilla 


The W3C validators are developed with assistance from the Mozilla 
Foundation, and supported by community donations. 

Donate and help us build better tools for a better web. 


Home About... News Docs Help & FAQ Feedback Contribute 

wrzr** A This service runs the W3C Markup Validator, vi.2 . 

Wjw JIfjt, COPYRIGHT <© 1994-2010 W3C® (MIT, ERCIM, KEIO), ALL RIGHTS 
RESERVED. W3C LIABILITY, TRADEMARK, DOCUMENT USE AND 
SOFTWARE LICENSING RULES APPLY. YOUR INTERACTIONS WITH THIS SITE ARE 
IN ACCORDANCE WITH OUR PUBLIC AND MEMBER PRIVACY STATEMENTS. 


1/VcVc usmj method (3) hcv-c- 1/Vlc dli^kcdl or\ *thc Validate by Divert |^pu*t w tab 
and pas-ted "the todt (or r\ov/ has -the dod-type -Pov- ttTML 弓 

a 七 -the -top, irrto 七 he -Pov-m. 1/VcVc v-cady -Pov- 七 he big moment..will 七 he web page 

validate? Bets snyo^c? Click Chcdk -the pajc) *fco -P'md out.. 


peel -fv-cc *to use 

method (I) OV 

(Z) l-f mov-c 
Coy\\/Cy\\cy\"L- 
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Houston wg have a problem 


••• 


That red on the page can’t be good. It doesn’t look 
like the page validated. We’d better take a look … 


Wc -failed 
validation- 
I 七 looks like 

tilCV-C IS OY\t 

C\r\rov. 



[Invalid] Markup Validation of upload://Form Submission W3C Markup Validator 



| http://validator.wi.org/check C Coogle 

l\ 




Markup Validation Service 

Check the markup (HTML, XHTML, •••) of Web documents 


Jump To: Notes and Potential Issues 


Validation Output 


Error found while checking this document as HTML5! 


Result: 1 Error, 3 warning ⑹ 


Source : 


Encoding : 
Doctype : 
Root Element: 


<!doctype html> 

<html> 

<hcad> 

<title>Head First Lounge</title> 

</head> 

<bodv> 

<hl>Welcome to the New and Improved Head First Lounge</hl> 
<img src= ,, drinks.gif ,, > 

<p> . . • 

Join us any evening for refreshing 

<a href= ,f elixir. html n >elixirs</a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 

Utf-8 (dprerr automarlrally) t } 


(detect automatically) 


TVis mus*t be 

-tilC CV-VOV. 


Validation Output: 1 Error 

O Line 8, Column 29: An img element must have an alt attribute, except under certain conditions. For 
details, consult guidance on providing text alternatives for images. 

<img sre-"drinks.gif" > 




WatcK it! 


The W3C is constantly 
revising the validator- 

Because the W3C frequently 
revises the validator，you mdy 
not see exactly the same error 
messages. No worries, just keep following 
along because all the stuff in the next few 
pages is important, even if you don’t see 

the error above. 


This does " 七 look bad. I 七 looks like 
wc have -fco use 七 he al 七 a^tbribu 七 e m 
七 he <im^> element 
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the alt attribute is required 

Fixing that error 

Okay, this looks pretty simple to fix. You just need to add an 
alt attribute to your <img> elements in HTML5. Go ahead 
and open “lounge.html”，make the change, save, and then 
let’s try to validate again. 


<!doctype html> 
<html> 


<head> 

<title>Head First Lounge</ title> 

</head> 

<body> 

<hl>Welcome to the New and Improved Head First Lounge</hl> 

<img src="drinks.gif» alt=”Drink S ”> x /咖 alt atVibute; 

<P> -- - ddd it 

Join us any evening for refreshing 

<a href= n elixir .html">elixirs</ a> r conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 

Wireless access is always provided; BYOWS (Bring 
your own web server). 

</p> 

<h2>Directions</h2> 

<P> 

You 1 11 find us right in the center of downtown 
Webville. If you need help finding us, check out our 

<a href= n directions .html n >detailed directions</a>. 

Come join us! 

</p> 

</body> 

</html> 





Why do you think the alt attribute is required in HTML5? 
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WeYc almost there 


••• 


Success! We have a green bar on the page; that must be good. But there are three 
warnines. That sounds like we’ve still eot a few thines to take care of. Let’s take a look: 




(Valid] Markup Valiilation of upload.//Fufm Subrnissiun - W3C Markup ValiJaV^ 


\~M~\ ► Bhlip.//v4liddtor w3.org/cheek 


~ c [( q 7 Cuoglv 


Markup 忽嫩 O m i^ p r^ L 

,XHTML, ...) of Web documents 


Jump To: Notes and Potential Issues Congratulations Icons 


This document was successfully checked as HTML 


Result ： Passed, 3 warnlng(s) 



Source : 


Encoding : 
Doc type : 
Root Element: 


<!doctype html> 

<html> 

< <title>Head First Lounge</title> 

</head> 

<b <hKwelcomG to the New First Loungc</hl> 

<img src-"drinks.gif" alt-^Dnnks > 

conversation and 

maybe a game or two of <em>Dance pcance.Revqlution</em>. 


(detect automdticany) 


ID 


Wc fasscdl But 


av-c a -Pew 

wc should sdvoll Aovjy\ ar>d 
*tak a look" 


Notes and Potential Issues 

The followina notes and warnings highlight missing or conflicting information which caused the validator to 
= e g= S w 0rk pnor ?o vaLSon. or other things affecting the output below if the guess or 
incorrect, it could make validation results entirely incoherent. \i\s highly recommended io checks potenUa 
issues, and, if necessary, fix them and re validate the document. 

令 Using experimental feature: HTML5 Conformance Checker. ^ 

Th e validator C h eC k e dyour document with an experimenta. feature HTMLB 

feature has been made available for your convenience, but be aware that ,t may be unrel.^le, or not 
perfectly up to date with the latest development of some cutting-edge technolog.es. If you find any issues 

with this feature, please report them. Thank you. 


少 No Character encoding declared at document level 

No character encoding information was found within the document, either in an 
XML declaration. It is often recommended to declare the character encoding in the document itself, espec y 
it there is a chance that the document will be read from or saved to disk, CD. etc. 

See this tutorial on character encoding for techniques and explanations. 



Ko v/ovvics 一七 his IS a 

s-bdndard you II alv/3ys 

see as lor>^ as -the valida-fcov- is 
do^s*idcv-cd *to be c%pcv*imcy>*tal by 
七 he (v/iVidh dould be -fov 

七 ime). 


a 


七 his looks like d pv^oblcrw caused 


PV-oblCrw 

cMaratitr c^dodm^. Wie’ll >wV>a 七 

dbou 七 m a set... 


by ledv'm^ ou 七 some m-fov*mci*tior> 3bou*t 
youv- t 
七 hat’s 


^ Using Direct Input mode: UTF-8 character encoding assumed — 答、 .., . 

Unlike the "by URI-and "by File Upload" modes, the * Direct Input" mode of the validator provides validated ^ _ /W 七 WlS juS 七 Sa^/S that they 3^ 沪 ” 

document, and will ignore any charset information specified. 


document, and will ignore any cnarsei imuimauu.. 


supply or>c- 


So, we’ve got a valid file in terms of how we’ve written the 
HTML, but it looks like we need to do something about our 
: character encoding.” Let’s take a look at what that means... 
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we need a character encoding 



^ No Character encoding declared at document level 

No character encoding information was found within the document, either in 
an HTML meta element or an XML declaration. It is often recommended to 
declare the character encoding in the document itself, especially if there is a 
chance that the document will be read from or saved to disk, CD, etc. 


Frank: The character encoding tells the browser what kind of 
characters are being used in the page. For instance, pages can be 
written using encodings for English, Chinese, Arabic, and lots of other 
types of characters. 

Jim: What’s so hard about figuring out how to display a character? If 
there’s an “a” in the file, then the browser should display an “a”. Right? 

Frank: Well, what if you’re using Chinese in your pages? It’s an 
entirely different “alphabet” and it has a heck of a lot more than 26 
A—Z characters. 

Jim: Oh. Good point.. .but shouldn’t the browser be able to tell the 
difference? Those other languages look nothing like English. 


Frank: No, the browser is just reading data. It can try to guess what 
kind of character encoding to use, but what if it’s wrong? This can lead 
not only to pages being displayed wrong, but also potential exploits 
from hackers. The character encoding takes the guesswork out of it. 


Jim: We’ve had the site up for a long time. Why is this an issue now? 

Frank: Because the validator is saying “Hey, if I’m going to validate 
your page, you’d better tell me up front what characters you’re going 
to use!” And think about it, we’d want to do that for the browsers out 
there anyway. Don’t stress, we just need to add one more line to our 
HTML, called a <meta> tag. I should have thought of this sooner. 


Jim: Got any other surprises for us? I really thought our web page 
would validate after we put the document type definition in our file … 


Frank: I sure hope there are no more surprises! Let’s get the <meta> 
tag in there and find out. 
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Adding a <mcta> tag to specify the character encoding 


Character encodings give us a way to represent all the letters, numbers and other symbols in our 
language on the computer. You might know of some of these encodings, like ASCII or even Morse 
code, and there are many other encodings out there. Luckily, the world has now standardized on 
the Unicode character encoding. With Unicode, we can represent all languages with one type of 
encoding. But, given there are other encodings out there, we still need to tell the browser we’re using 
Unicode (or another encoding of your choice). To specify Unicode for your web pages, you’ll need a 
<meta> tag in your HTML that looks like this: 


Vcta" - cavxS 
aWt ? 乎 .. 


T\\t Aavse 七 
a*b*tv-ibu*bc is 
y/e 七 

c\r\dodm 

/ 



The value o( -the 
dhairsct atbribute is 
the type o( dhavadtev 
v/cVc 


<meta charset= !f utf-8 n > 


个 

Jus*t like o{\\tr 
HTML lay, i\\t 

atbr_iW*tes. 


w u tf - 穿，孙 c^od'm^ m i\\t 
Um^ode family o-f c^od'my (oy^c 
J several). Ud ^ v/ers •咖 

y/c use -for v/cb 


there^ctre no ^ 

Dumb Questi9ns 


Doctypes, <meta> tags...ugh, do I need to really do all this 
to write web pages? 

J\l Specifying a doctype and character encoding with a <meta> 
tag are kind of like taxes: you gotta do them to be compliant. Look 
at it this way: you already understand them more than 98% of the 
web page writing population, which is great. But at the end of the day, 
everyone just puts the doctype and <meta> tag in their HTML and 
moves on with life. So make sure you’ve got them in your HTML, and 
then go do something much more fun. 

Qj utf-8? 

Work with us here. It's like WD-40; you don’t worry about 
why it’s called that, you just use it. As we said, utf-8 (also written 
sometimes as UTF-8) is part of the Unicode encoding family. The u 
in utf-8 means Unicode. Unicode is a character set supported across 
many commonly used software applications and operating systems, 
and is the encoding of choice for the Web, because it 


supports all languages, and multilingual documents (documents 
that use more than one language). It’s also compatible with ASCII, 
which was a common encoding for English-only documents. If you’re 
interested in learning more about Unicode or character encodings in 
general, check out the information on character encoding at 
http://www.w3.org/lnternational/0-charset.html. 

I've also seen <meta> tags that look like this: <meta http- 
equiv= H Content-Type" content="text/html;charset=utf-8" >. Do I 
need to use this instead sometimes? 

No. That is the format for the <meta> tag in HTML 4.01 and 
earlier. In HTML5, you can just write <meta charset="utf-8">. 

Is this why you had us save our files using utf-8 for the 
encoding way back in Chapter 1? 

Yes. You want the encoding of the file you’re serving to the 
browser to match the encoding you specify in the <meta> tag. 
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using meta to specify a charset 


Making the validator (and more than a few 
browsers) happy with a <mcta> tag... 

The <meta> tag belongs in the <head> element (remember that the <head> 
contains information about your page). Go ahead and add the <meta> tag line right 
into your HTML. Let’s first add it to the “lounge.html” file: 


<! doctype html> added i*t *to <hcad> clcmch*t 
<htmi> above <*ti*tlc> element 


<head> 

<meta charset= n utf-8"> 




0=z 


Add this I'mc above Bv\y oihev 
derwe^ts *m ihc <hcad> element. 


<title>Head First Lounge</ title> 

</head> 

<body> 

<hl>Welcome to the New and Improved Head First Lounge</hl> 

<img src= M drinks.gif" alt= n Drinks"> 


<P> 

Join us any evening for refreshing 

<a href= n elixir •html n >elixirs</a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 

</p> 

<h2>Directions</h2> 

<p> 

You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 

<a href="directions .html n >detailed directions</a>. 


Come join us! 

</p> 

</body> 

</html> 


Want to place another bet? Is this going to validate? First, make the 
changes to your “lounge.html” file, save it, and reload it into your 
browser. Once again, j ⑽ won’t notice any change, but the browser will. 
Now let’s see if it validates... 
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Third time's the charm? 


This time, we picked the second tab (validate by file upload). You can choose whichever 
method works best for you. If you want to try the upload method, then upload your 
“lounge.html” HTML file to the W3C validator web page at http : // validator. w3 . org. 
Once you’ve done that, click the Check button … 


u Sud^css-fully t\\tcVtd as 
Love *tV^c 

\Mt still one , 

Y\ttd bo abou 七 I 七 

(sec below). 



Success! We can tell the 
boss were writing totally 
industry standard HTML, and 
we can even say were ready 
for HTML5. 


0 




This is jus*t "the s3nr»c dbou~t "the 

•fad: thai wcVc usmj 

sc\rvidc- W No-thmg {p wo\rv-y about 
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more about validation and versions 


tJiereiare no ^ 

Dumb Questi9ns 


The validator says it is experimental for HTML5. What 
does that mean? 

The message “Using experimental feature: HTML5 
Conformance Checker” in the validator means that the validator is 
checking your HTML according to the HTML5 standard, but because 
the HTML5 standard isn’t final (and still has new features being 
added), the validator is prone to change, so the results you get 
when you validate your page aren’t set in stone. That means, as a 
conscientious developer, it's in your best interest to stay up-to-date 
on the HTML standard, and check your pages fairly regularly. 

What have we really achieved in this chapter? My page 
still looks the same. 

In this chapter we’ve tweaked your page slightly so that it is 
compliant with the HTML specification. What good is that? The closer 
you are to the spec, the more likely that your page is going to perform 
well in the real world. If you’re producing a professional web page, 
you want it to be written using the industry standard, and that’s what 
we’ve done in this chapter by adding a doctype, setting a character 
encoding, and cleaning up an oversight (the alt attribute) in the HTML. 

Why do we need that alt attribute anyway? 

For two great reasons. First, if your image is broken for some 
reason (say, your image server goes down, or your connection is 
really slow), the alt attribute will (in most browsers) show the alt text 
you’ve specified in place of the image. Second, for vision-impaired 
users who are using a screen reader to read the page, the screen 
reader will read the alt text to the user, which helps them understand 
the page better. 

What if I tell the browser I’m using HTML5, and I’m not? 

The browser will figure out that you’re not really writing HTML5 
and use the error handling capabilities it has to try to do the right 
thing. And then you’re back to the problem of having the various 
browsers handle your page in different ways. The only way you can 
get predictable results is to tell the browser you’re using HTML5 and 
to actually do so, properly. 


We talked a little about HTML5, but I want make sure I’m 
clear: is there any difference between the HTML we’re writing 
and HTML5? 

We’re using standard HTML, which is HTML5. Now, HTML5 
introduced some new markup (which we’ll be seeing soon enough) 
as well as support for writing web applications (which we won’t be 
doing in this book), but HTML5 is HTML, and everything you’ve 
been writing is HTML5 “compliant.” So, sorry for the terminology, but 
going forward everything is just HTML, including all the new features 
provided by the HTML5 specification. 

The good news is that everything you’ve learned is all ready for 
HTML5, and in fact you see how little you actually had to do to go 
from an “informal HTML” page to a professional HTML page. That 
said, you might want to tell your boss you’re already using HTML5 
just for bonus points toward your next raise. 

What’s the big deal with HTML5 compared to HTML 4.01 
anyway? 

The big deal about HTML5 is threefold. First, there are some 
new elements and attributes in HTML5 that are pretty cool (like the 
<video> element), and others that will help you write better pages 
(well be getting to those later in the book). 

Second, there are many new features that allow web developers 
to create web applications with HTML5. Web applications are web 
pages that behave more like applications (like the ones you’re used 
to using on your laptop or mobile device) than static web pages. If 
you’re interested in creating web applications, then after you're all 
done with this book (cue shameless plug), you should check out 
Head First HTML5 Programming (O’Reilly). 

Finally, the HTML5 specification is a lot more robust than the 
specifications for the previous versions of HTML. Remember how we 
said that the specification is now documenting common errors that 
web developers make? And helping browsers to know how to handle 
those errors? That means that web pages with errors on them don’t 
cause the havoc they used to, which is a good thing for users. 

All in all, HTML5 is a big improvement over HTML 4.01, and well 
worth learning. We’ll get you up to speed quickly over the next few 
chapters. 
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热 c 你 


Your turn. Add the <meta> tag to "directions.html" and “elixir.html”. Try validating 
them; do they validate? If not, fix them so that they do. 


Use "this spade -fo\r ir>o-tcs abou^t youv- 
validatmj 




Time to play a little game with the validator. Take the code you just successfully 
validated as HTML5 (on page 241), and remove the doctype. That’s right—remove it, 
just to see what happens when you validate. Go ahead and submit this version of the 
file to the validator and see what happens. Make notes below about the errors you get 


<!doctype html> 

<html> 

<head> 

<meta charset= n utf-8 M > 

<title>Head First Lounge</ title> 

</head> 

<body> 

<hl>Welcome to the New and Improved Head First Lounge</hl> 

<img src="drinks.gif" alt= n Drinks n > 

<P> 

Join us any evening for refreshing 

<a href= M elixir .html M >elixirs</ a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 

</p> 

<h2>Directions</h2> 

<P> 

You 1 11 find us right in the center of downtown 
Webville. If you need help finding us, check out our 

<a href= n directions .html n >detailed directions</a>. 

Come join us! 

</p> 

</body> 

</html> 



>u\r Y\oits Hoy/ 7] 

C\nro\rs did you yt? 
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tips for good html 


Calling all HTML professionals, grab the handbook … 

Welcome to the elite set of HTML crafters，those who know how to create professional 
pages. There’s a lot to remember, so the City of Webville prepared a handy guide to creating 
industry standard pages. This guide is meant for you — someone who is new to Webville. It 
isn’t an exhaustive reference, but rather focuses on the more important best practices in 
building your pages. And you’ll definitely be adding to the knowledge in this guide as you get 
to know your way around Webville in coming chapters. But for now, take one — they’re FREE. 
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Webville Guide to HTML 

In this handy guide, we’ve boiled down writing well-formed HTML pages 
into a common sense set of guidelines. Check them out: 

Always begin with the <doctype>. 

Always start each page with a doctype. This will 
get you off on the right foot with browsers, and 
with the validator too. 

Use <! docytype htmi> at all times, unless 
you really are writing HTML 4.01 or XHTML. 

The <html> element: don’t leave home without it. 

Following the doctype, the <htmi> element must 
always be the top, or root, element of your web 
page. So, after the doctype, the <htmi> tag will 
start your page and the </htmi> tag should end it, 
with everything else in your page nested inside. 


Remember to use both your <head> and your 
<body> for better HTML. 

Only the <head> and <body> elements can go 
directly inside your <htmi> element. This means 
that every other element must go either inside the 
<head> or the <body> element. No exceptions! 


Feed your <head> the right character encoding. 

Include a <meta charset= n utf-8 n > tag in your 
<head>. The browser will thank you, and so will 
your users when they’re reading comments on your 
blog from users around the world. 
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the fine points of html 


Webville Guide to HTML, continued 

In this handy guide, we’ve boiled down writing well-formed HTML pages 
into a common sense set of guidelines. Check them out: 





What’s a <head> without a <title>? 

Always give your <head> element a <titie> 
element. It’s the law. Failure to do so will result in 
HTML that isn’t compliant. The <head> element 
is the only place you should put your <titie>, 
<meta>, and <styie> elements. 


Be careful about nesting certain elements. 

Within the guidelines we’ve provided here, the 
nesting rules are fairly flexible. But there are a couple 
of cases that don’t make sense. Never nest an <a> 
element inside another <a> element because that 
would be too confusing for our visitors. Also, void 
elements like <img> provide no way to nest other 
inline elements within them. 


Check your attributes! 

Some element attributes are required, and some are 
optional. For instance, the <img> element wouldn’t 
make much sense without a src attribute, and now 
you know the alt attribute is required too. Get familiar 
with the required and optional attributes of each 
element as you learn it. 
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Throughout this book you’ve been using elements and attributes that are all part 
of the current HTML standard. So, you haven’t had much opportunity to see the 
phased-out elements and attributes. Most of those elements actually got phased 
out in HTML 4.01, but they may still be hanging around in old web pages, so it 
doesn’t hurt to know a little about these legacy elements. We did some digging 
and found an HTML 3.2 page that contains some elements and attributes that are 
no longer part of the standard, as well as a couple of common mistakes that are 
not recommended in modern HTML. 



<html> 

<head> 

<title>Webville Forecast</ title> 
</head> 


<body bgcolor= M tan" text="black n > 



Hcv-c av-c some a*t*tv-'»biA*tcs 七 

dor\*tv-ollcd fwerrtaticm. b^olov sets 
be katkyour\di tolov- <Jc pay, ar\d 

sets i\\t Co\or o-f i\\t body 


<P> 


The weather report says lots of rain and wind in store for 

<font face= M arial n >Webville</ font> today, so be sure to 
stay inside if you can. 


</p> 


^ fov\i 匕 y/eve made y/i 七 h 


<ul> 


</ul> 


<li>Tuesday : Rain and 60 degrees . y!>u C^ouldl yt av/ay ^ 七^认七 

<li>Wednesday : Rain and 62 degrees. and 

Yoia somC*t>w'CS still C-3^) bu 七 i*b is 

y\o{, rcCon\n\Cv\dcdH 


<p align=right> 

Bring your umbrella! 


Missing quotes avoimd a*t*tv"ibu*tc values. 
Quotes a\rc always ^cton\n\Cr\dcd y\ovj, By\A 
\rc^ui\rcd -fo\r a*t*tv~ibu*tcs W\{\\ multiple values. 


<centerXfont size= n small n >This page brought to you buy Lou's 
Diner, a Webville institution for over 50 years. 


</fontX/center> 

tteve wcv-c two v/ays -feo ali^ 

o\r Uy\itY a pictc o( 



</body> 

</html> 


Twt s»z^ v/ds CoY\broWtd 
*tV^C <-foh*t> element 
usm^ s'»« atbr’ 》 W*te. 
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test your knowledge of html 



BE . 调 

Below, you’ll find an HTML file. Your 
job is to play like you’re Ae validator 
and locate ALL Ae errors. After 
you’ve done Ae exercise, look at the 
end of the ch^ter to see if you caught 
Aem all. 

Use 如 vaV.daW to 
(ov »-f 70U Wm*ts)* 


<html> 

<head> 

<meta charset="utf-9 M > 

</head> 

<body> 

<img src= n chamberofcommerce.gif n > 

<hl>Tips for Enjoying Your Visit in Webville 

<p> 

Here are a few tips to help you better enjoy your stay in Webville. 

</p> 

<ul> 

<li>Always dress in layers and keep an html around your 
head and body.</li> 

<li>Get plenty of rest while you're here , sleep helps all 
those rules sink in. </li> 

<li>Don't miss the work of our local artists right downtown 
in the CSS gallery. 

</ul> 

</p> 

<p> 

Having problems? You can always find answers at 

<a href= n http : //wickedlysmart. com M Xem>WickedlySmart</emX/a>. 

Still got problems? Relax, Webville's a friendly place, just ask someone 
for help. And, as a local used to say : 

</p> 

<emXp> 

Don't worry. As long as you hit that wire with the connecting hook 
at precisely 88mph the instant the lightning strikes the tower... 
everything will be fine. 

</emX/p> 

</body> 

</html> 
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Getting our HTML 
up to snuff wasn’t too hard, but it 
sure took a while to figure it all out. 
And now weve got to style these 
pages with CSS. Thafs a whole 
different language, Isn't it? 


BULLET POINTS 



■ HTML5 is the current HTML standard. 

■ The World Wide Web Consortium (W3C) is 
the standards organization that defines what 
standard HTML is. 


■ Most web pages use the utf-8 encoding for HTML 
files, and for the <meta> tag charset attribute. 

■ The alt attribute is required for the <img> 
element. 


■ The document type definition (doctype) is used 
to tell the browser the version of HTML you’re 
using. 

■ The HTML standard is now a “living standard，” 
which means that the standard will change to 
incorporate new features and updates. 

■ The <meta> tag in the <head> element tells the 
browser additional information about a web page, 
such as the content type and character encoding. 

■ The charset attribute of the <meta> tag tells the 
browser the character encoding that is used for 
the web page. 


■ The W3C validator is a free online service that 
checks pages for compliance with standards. 

■ Use the validator to ensure that your HTML is 
well formed and that your elements and attributes 
meet the standard. 

■ By adhering to the standard, your pages will 
display more quickly and with fewer display 
differences between browsers, and your CSS will 
work better. 
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are you awake? 




HTMLcposs 


It’s been a heck of a chapter. Go ahead and grab a cup of your favorite beverage, sit 
back, and strengthen those neural connections by doing this crossword. All the answers 
come from the chapter. 



Across 

I. Victim of the browser wars. 

4. The HTML standard is a_standard. 

6. Required in the <head> element. 

8. Web standards makers have promised future 

HTML will be_compatible with older HTML. 

10. The boss wanted to standardize before adding 
_to the Lounge pages. 

II. When your HTML meets the standard, it is this. 
14. Definition that tells the browser and validator 
what kind of document you’re creating. 


Down 

1. Standards organization that supplies the 
validator. 

2. Microsoft versus Netscape. 

3. <img> attribute required in standard HTML. 

5. This service will check your HTML for 
compliance with the standard. 

7. The older_were much more complicated 

compared to the newest one. 

9. Where you put information about the page. 

12. Where you put web page content. 

13. The most common encoding for web pages. 
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/ 


Missing dod*typc 


<html> 

<head> 


Should be VtP-0" ms-tcad of 

Vt*f—T (whidh does〆 七 C^is-ip 

. <*titlc> should be 

<meta charset= n utf-9 M > 



</head> 

<body> 

<img src= M chamberofcommerce.gif"> 


•m 七 he <hcad>- 


No al-t 


t 


m 




Below, you’ll find an 
HTML file. Your job 
is to play like you’re 
the validator and 
locate ALL the errors. 

Here’S lie solution. 


<hl>Tips for Enjoying Your Visit in Webville 

<P> 




Here are a few tips to help you better enjoy your stay in Webville. 


/Vlissmj </hl> This will dduse 
pvoblcrws y/iih 七 he <p> derwe^i below. 


</p> 

<ul> 


<li>Always dress in layers and keep an html around your 
head and body.</li> 

<li>Get plenty of rest while you're here, sleep helps all 
those rules sink in. </li> 


<li>Don't miss the work of our local artists right downtown 

in the CSS gallery. - /l^issmg </li> taj- This y/i|| siill validate, 

</ul> but it’s m > 七 yctonwn\tv\dcdl 

</p> -that does〆 七你 atdh a <p> 

Having problems? You can always find answers at 

<a href="http: //wickedlysmart. com n Xem>WickedlySmart</emX/a>. 

Still got problems? Relax, Webville's a friendly place, just ask someone 


for help. And, as a local used to say : 


</p> 

<emXp> 



<cm> <p> *tags avc 


Don't worry. As long as you hit that wire with the connecting hook 
at precisely 88mph the instant the lightning strikes the tower... 
everything will be fine. 

</emX/p> 

</body> 

</html> 
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HTMLCroSS Solution 
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Your turn. Add the strict doctype and the <meta> tag to 
"directions.html" and “elixir.html”. Try validating them—do 
they validate? If not, fix them so that they do. 

Solution: To validate “elixir.html”, you’ll have to add the 
alt attribute to each of your <_> elements. 
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standards and all that jazz 



Time to play a little game with the validator. Take the code you just successfully 
validated as HTML5 (on page 241), and remove the doctype. That’s right—remove it, 
just to see what happens when you validate. Go ahead and submit this version of the 
file to the validator and see what happens. Make notes below about the errors you get 


<!doctype html> 

<html> 

<head> 

<meta charset= n utf-8 M > 

<title>Head First Lounge</ title> 

</head> 

<body> 

<hl>Welcome to the New and Improved Head First Lounge</hl> 

<img src= M drinks.gif" alt= M Drinks n > 

<p> 

Join us any evening for refreshing 

<a href= n elixir .html">elixirs</ a>, conversation and 
maybe a game or two of <em>Dance Dance Revolution</em>. 
Wireless access is always provided; BYOWS (Bring 
your own web server). 

</p> 

<h2>Directions</h2> 

<p> 

You 1 11 find us right in the center of downtown 
Webville. If you need help finding us, check out our 

<a href= n directions .html n >detailed directions</a>. 

Come join us! 

</p> 

</body> 

</htmi> % 七 -thvcc cvvovs -Pouv y/a\rh'mgs i-P wc *t\ry to valida-be without 

the dod*typc. The validatov assumes wcVc wvi-t'mg HTML 午 .01 
Tvahsi-tiohal (whidh was a vcvsioh of HTML 午 .01 desired bo use while 
you y/eve u *t\rahsi*tioh'mg w *bo )<ttTML). The validatov vcally does / 七 like 
that y\o Aotbj^t) by\A dompla'ms a douplc -times aboui -that. 
I*t also dompla'ms about dhavse 七二 1 VtP - 0”>, bedduse bc-Povc 

HTML5, dhavse-t was ^o*t a valid a*t*tv-ibu-tc of -the tag. You 

the idea that us'mg a dodtype makes both -the valida^tov ； -the 

b\roy/sc\rs, happicv dampens. 



You\r hotes hcirc- Hoy/ 
evrovs did you get? 


相 av\y 
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7 getting started With CSS 



Dont get me wrong, the 
hair, the hat—it all looks great. 
But don't you think hed like it if 
you spent a little more time adding 
1 some style to your HTML? 


I was told there’d be CSS in this book, so far youve been 

concentrating on learning HTML to create the structure of your web pages. But as 
you can see, the browser’s idea of style leaves a lot to be desired. Sure, we could 
call the fashion police, but we don’t need to. With CSS, you’re going to completely 
control the presentation of your pages, often without even changing your HTML. 
Could it really be so easy? Well, you are going to have to learn a new language; 
after all, Webville is a bilingual town. After reading this chapter’s guide to learning the 
language of CSS, you’re going to be able to stand on either side of Main Street and 
hold a conversation. 


this is a new chapter 
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YouYg wot iw Kansas awymore 


Rcmcmbcv lA/i^avd Oz.? lAfell, t^is 
is 七 part tiic book y/V^cv-c tiVmy 
y> blatk a^d v/Ki-bc -to tolov. 



eee 


Mead Pirst Lounge 


— \_^\\ - filc:///chapter7/lounge/beverage 


Our Elixirs 


Green Tea Cooler 



You’ve been a good sport learning about marl 
and structure and validation and proper syntax and 
nesting and compliance, but now you get to really 
start having some fun by styling your pages. But no 
worries, all those HTML push-ups you’ve been doing 
aren’t going to waste. In fact, you’re going to see that 
a solid understanding of HTML is crucial to learning 
(and using) CSS. And learning CSS is just what we’re 
going to do over the next several chapters. 


Just to tease you a bit, on these two pages we’ve 
sprinkled a few of the designs you’re going to work 
with in the rest of the book. Quite a difference from 
the pages you’ve been creating so far, isn’t it? So, 
what do you need to do to create them? Learn the 
language of CSS, of course. 


0OO 


nQei lounQ«-M m '_ 


Let’s get started... 


1 Coffee 


HOMF. 


,V%.n novs RKOPCT LOCAtlOlg^ 


SUrbu» meet* media 


3/12/2012 






.ouodtike BQtnce fi«twnV ll i not; Tm 
V I write this.lmteyvu,Ui 

^,lfRraiVFC 0 «^<>o'h. ««l Wifi (■»' ^ 

r 工：一 ▲二一 X ! 


•ocul Mt^rkaip 
: worto- Wc’vc 


tedi 


r »oon to 


y roov® 




戀發義 




«)M 


Moot unique pal 


Iron of the month 




PouUbo. WMhinulon, 

Ulte, with the 
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^l^^o U r na , html 


digital 


ef>o 


I f 6 1 (^" ] * ^ ^ , * ： ///chapier9/lounge/iojngc.himl 


Head First Lounge 


Llixirs 


s/elixir.html 


ass, citrus peel and rosehips, this icy 


lixir combines the healthful benefits of 

d ginger root 


to the Head First Lounge 

)ungc is, no doubt, the biggest trendsetter in 
I to sample tho eclectic offering of elixirs, teas, 
>tay a bit longer and ©njoy the multictjltural 
dt combines d hdrrnony of tdstu, texture, < 9 rid 
it in frifsh dnd h^«jlthy in^reciicfnLs. 

at the lounge, you'll enjoy 0 smooth mixture of 
ac sounds, filling tho lounge and adding an 
0 your dining experience. The decor surrounds 
* n 9 sentiments of sights from erds pefst. And, 
njn 9 p offers frftp wireless acxc 妨 to the 
your laptop. 


t guarantee: at the lounge, wc'rc committed to 
jvidiny yvu, uuryuest, wilhun txveptiumd 
)erience every time you visit. Whether you're 
f stopping by to check in on email over an 
如， or are hereJvr an uui-vf-lhe-ordinary 
ner ， l/oull find our knowledgeable service 
Tpoy attention to every detail. If you're not 
I huveu Bhetrbvrry Bliss Elixir vn us. 


niyht, join us in the bdekraurn «sv our 
hoitc selection of Udncv dnd drum&bdss 

tiki-rhymed dnnr^ floor. Or just hang 
ify white vinyl booths at the dance bar. You 
delivered from the main lounge right to the 
had enough of the beat, just hcod back to 
idx. And, no matter where * 


Weekly ElixiJ 
Specials 


Lemon Breeze 

The ultimate healthy 
this elixir comDinee 
botonicals, minerals, 
vitamins with a twist 
lemon into o smooth ci 
wonder that will keep 
immune system going i 
and all nighc. 


Chai Chiller 

Not your traditionol choi, 
elixir mixes nidte with < 
spices and adds an ext 
chocoldte kick for d 
caffeinated taste sensot^l 
on ice. 


day 


July 


August 18 th 

rhe aties 1 ^fsitea on 


my bee 


S/s 

[Tony 

b/b 

Vb\ 

i 

3/5 


■) 3 Of ftldftfflOWfir hftfh will 1/starbuzz/indcx.html 


.providing *U the caffeine 
you nttd to power your 
Ufe. just drink it. 


“•providing all the caff 
you need to power ] 
life, just drin 


JTY COFFEE, QUALITY CAFFEINE 


ORDERONUNE with thr BEAN MAOIINE 

FAST 

FRKSH 

TO YOUR DOOR 


buzz Coffee, wc arc dedicated to filling all your caffeine 
hrmigh nur qunlity noffrrs and tms. Surr, wr want ynu tn 
iruat cup uf cuffw auda nrvat uuffvu iixpvriuuvu db wvD, 
pc the only company that actively monitors and optimizes 
r levels. So stop by and fill your cup, or order online with 
… / Bean Machine online order form, and get that quality 
11177. roffp.fi th«t yon knnw will rru^rt your raffp.inp. 


did wc mention caffeine? We’ve just started funding t 
doing all the wonderful research at the Caffeine Buzz, 
the liitMt on mffep. and othf*.r raffrinr pmdiirt.% stop 
pay |hi;iiiavuiii. 


STORY 


E a plan, a ouffuv bvaii". Okay, lliat duvsu'l iuaki; a 
me, but it resulted in a damn good cup of coffee. 

's CEO is that man, and you already know his plan: a 
;on every comer. 


In only a few years he's ex 
Starbuzzjust about 
lhis> car is that Starbuzz t 


few years he's executed that plan and today you can 

t anywhere. And, of course, the big news 
teamed up with Head First readers to 
StarhiiTy.'s Wch prr.srnrr, whirh \n growing rapidly And 
help Hiwi iLu caffuiuu uuuds uf ii whulv uvw suluf 


)FFEE BEVERAGES 


IUZZ CX>FF 

ta variety of caffcinatcd beverages to choose from at 
tduding our House Dlenc^ Mocha Cafe Latte, 

,and a fa 


i favorite of our customers, Choi Tea. 


I Iso offer a variety of coffee beans, whole or ground, for you 
|kc home with you. Order your coffee today using our online 
Machine, and take the Starbuzz Coffee experience home. 


ORDER ONLINE with UiuBE 

MACHINE 
FAST 
FRESH 

TO YOUR DOOR 

Why wait? You can order all our 1 ■ 
coffees ri^lii fruin liic* lutcriivt wi 
new, automated Bean Machine. 11 
doft 5 it work? .lust dirk on the Hr. ■ 
Machine link, enter your order, a ■ 
behind the scenes, your coffee is 
ruastud, ground (if yuu want), 
and shipped to your door. 


Ill our 
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the css language 


Overheard ow Webville's "Trading Spaces" 

Not up on the latest reality TV? No problem, here’s a recap: take two 
neighbors, two homes, and S 1,000. The two neighbors switch homes, and 
using the $1,000, totally redesign a room or two in 48 hours. Let’s listen in... 



Of course, in the Webville edition of the show, everyone talks about 
design in CSS. If you’re having trouble understanding them, here’s a little 
translation tip: each statement in CSS consists of a location (like bedroom), 
a property in that location (like drapes or carpet), and a style to apply to 
that property (like the color blue, or 1 inch tiles). 
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getting started with css 


Using CSS with HTML 

We’re sure CSS has a bright future in the home design category, but let’s 
get back to HTML. HTML doesn’t have rooms, but it does have elements, 
and those elements are going to be the locations that we’re styling. Want to 
paint the walls of your <p> elements red? No problem; only paragraphs 
don’t have walls, so you’re going to have to settle for the paragraph’s 
background-color property instead. Here’s how you do that: 


TKc -f'lv-st 70 U do IS sclent 

Vou y/a^-t *to m tViis tasc 

七 he <?> cle 州 Notice m CSS, you 

cW 七 七 < > av-ouy\d 一 e. 

V 

p { 


Then you spedi-fy 七 he pvopev ■ 七 y you 
v/3h*t bo style, m 七 his ^ase -the <p> 
clcrwc^ts badk^vou^d dolov-. 


/ 广 ~ 〜代 goihg h> sci the 

j badkg\rouhd-dolov- -to v-cd. 


background-color : red; 



Pl^c all the styles 
-Poir ihc <p> elc^i i 
bctwcch f } bv-a^cs. 


a dolor> *m brbwee 的 

七 he fvofevfcy a^d i*b value- 


A*t *tiic fu*t 

3 semi 匕 olorv 



You could also write the rule like this: 


v/V^olc 

a RULE- 


p { background-color: red; } 

Here, all we’ve done is remove the linebreaks. As with HTML, you can format 
your CSS pretty much as you like. For longer rules, you’ll usually want to add 
some linebreaks and indenting to make the CSS more readable (for you). 


Wanna add more style? 

You can add as many properties and values as you like in each CSS rule. Say you 
wanted to put a border around your paragraphs, too. Here’s how you do that: 


P 


background-color : red; 
border : lpx solid gray; 



you have *to do is add 
ar>o*thcv* fv-ofC\rty 扣 d value- 


"The <p> clcrwCht will 

a bo\rdc\r... 


N 

… 七 Wis 丨卜 cl tWitk, solid, a^a yay. 
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more about css and html 



Does every <p> element have the same 
style? Or can I, say, make two paragraphs different 
colors? 

The CSS rules we’ve used so far define the style 
for all paragraphs, but CSS is very expressive: it can 
be used to specify styles in lots of different ways, for 
lots of different elements—even subsets of elements. 
You’ll see how to make paragraphs two different colors 
later in this chapter. 

How do I know what properties I can set on 
an element? 

Well, there are lots of properties that can be 
set on elements, certainly more than you’d want to 
memorize, in any case. You’re going to get quite 
familiar with the more common properties in the next 
few chapters. You’ll probably also want to find a good 
CSS reference. There are plenty of references online, 
and O’Reilly’s CSS Pocket Reference is a great little 
book. 

Remind me why I’m defining all this style in 
a separate language, rather than in HTML Since 
the elements are written in HTML, wouldn’t it be 
easier just to write style in HTML, too? 

You’re going to start to see some big advantages 
to using CSS in the next few chapters. But here’s a 
quick answer: CSS really is better suited for specifying 
style information than HTML. Using just a small bit of 
CSS, you can create fairly large effects on the style 
of your HTML. You’re also going to see that CSS is a 
much better way to handle styles for multiple pages. 
You’ll see how that works later in this chapter. 


Say you have an <em> element 
inside a paragraph. If you change the 
background color of the paragraph, do 
you think you also have to change the 
background of the <em> element so it 
matches the background color of the 
paragraph? 
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getting started with css 


fretting CSS into your HTML 


You know a little about CSS syntax now. You know how to select an element and then 
write a rule with properties and values inside it. But you still need to get this CSS into 
some HTML. First, we need some HTML to put it in. In the next few chapters, we’re 
going to revisit our old friends — Starbuzz, and Tony and his Segway journal — and 
make things a little more stylish. But who do you think is dying to have their site styled 
first? Of course, the Head First Lounge guys. So, here’s the HTML for the Head First 
Lounge main page. Remember, in the last chapter we fixed things up a little and made 
it proper HTML (would you have expected any less of us?). Now, we’re adding some 
style tags, the easiest way to get style into your pages. 

<!doctype html> 

<html> 

<head> 

<meta charset= n utf-8"> 

<title>Head First Lounge</ title> 

Hive’s 'm*tcvcs*tcd <s*tylc> 士你⑼七 . 


But hot hc^cssa\ri|y the 
best way. Wt\\ 

"to this latcv- ih 
the dhap-tev- dnd see 
a^o-thev- way. 


<style> 


> 



</style> 


To add CSS style div-c^-tly *bo youv- HTML, add 
^dlosmj s*tylc *tajs 七 he <hc3d> clcrwc^t 

youv- CSS v-ulcs av-c go— 

"to 3 。 v-ight ih hcv-c. 


</head> 

<body> 

<hl>Welcome to the Head First Lounge</hl> 

<P> 

<img src= n images/drinks.gif" alt= n Drinks n > 

</p> 

<p> 

Join us any evening for refreshing 

<a href= n beverages/elixir.html n >elixirs</a>, 

conversation and maybe a game or two of 
<em>Dance Dance Revolution</em>. 

Wireless access is always provided; 

BYOWS (Bring your own web server). 

</p> 

<h2>Directions</h2> 

<p> 

You'll find us right in the center of downtown 
Webville. If you need help finding us, check out our 

<a href= n about/directions .html M >detailed directions</a>. 

Come join us! 

</p> 

</body> 

</html> 
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adding style to the lounge 


Adding style to the lounge 




丁 he pvopcvty *to 七 1^ *?。灼七 dol 

W dolov W (you rn’i^vt *t\Vmk i*t v/c 
w -Po^*t-tolov w ov- 七 - dolov: bu*t i*t’s 灼 ot) 




sc-t-tihg -the text -to a 

jovcly ^airooh to\oY -that happen 

■to -the lounge douches. 


Now that you’ve got the 〈 style〉element in your HTML, you’re going to add some style 
to the lounge to get a feel for writing CSS. This design probably won’t win you any “design 
awards,” but you gotta start somewhere. 

The first thing we’re going to do is change the color (something to match those red lounge 
couches) of the text in the paragraphs. To do that, we’ll use the CSS color property like this: 

<!DOCTYPE html> 

<html lang= M en M > 

<head> 

<meta charset= M utf-8 n > 

<title>Head First Lounge</ title> 

<style> 

v-ulc 

is ^onr\^ *to spc£.»*fv 
■tKc tolov- or 
pav-aya^s. 

WcVc 

<\» *to 

apply *tWis sb/\t *to- 

</style> 

</head> 

<body> 

<hl>Welcome to the Head First Lounge</hl> 

<P> 

<img src= n images/drinks.gif" alt= M Drinks M > 

</p> 

<p> 

Join us any evening for refreshing 

<a href= n beverages/elixir .html M >elixirs</a> f 

conversation and maybe a game or two of 
<em>Dance Dance Revolution</em>. 

Wireless access is always provided; 

BYOWS (Bring your own web server). 

</p> 

<h2>Directions</h2> 

<P> 

You'11 find us right in the center of downtown 
Webville. If you need help finding us, check out our 

<a href =" about/directions .html">detailed directions</a>. 

Come join us! 

</p> 

</body> 

</html> 


ov is 
y/ould be 



The p sclcd-tov- 
sdedts all the 
pav-aav-aphs -the 
ttT/WL. 
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Cruising with style: the test drive 

Go ahead and make all the changes from the last couple of pages 
to your “lounge.html” file in the “chapter7/lounge” folder, save, 
and reload the page in your browser. You’ll see that the paragraph 
text color has changed to maroon: 


Hcvc s ouv- 
pav-a^v-a^ 





e 


Head First Lounge 



C 


file:///chapter7/lounge/lounge.html 


Welcome to the Head First Lounge 


1 


else is as »*b 




Join us any evening for refreshing elixirs, conversation and maybe a game or two 
of Dance Dance Revolution. Wireless access is always provided; BYOWS (Bring 
your own web server). 

Directions 

You'll find us right in the center of downtown Wcbvillc. If you need help finding 
us, check out our detailed directions. Come join us! 


should be ： v^cad'my 
av-c still blatk, because 
all we selected style 


Kotitc *bv^c tolov- 
of Imks didn't 

katk o( Y ouv " … 


J 





Instead of setting the color, what if you set background-color of 
the <p> elements to maroon instead? How would it change the 
way the browser displays the page? 
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styling headings 


Style the heading 


Now let’s give those headings some style. How about changing the 
font a bit? Let’s change both the type of font, and also the color of 
the heading fonts: 


hi 

{ 



font-family: 

sans-serif; 

} 

color : 

gray ; 

h2 

{ 



font-family : 

sans-serif; 

} 

color : 

gray; 


P 

} 


rteves i\\t vulc -to 七 

<y> clcwc^-b av^d 

i\\t 仏七 - 以⑹ b r 丄 

doU^^ a 7 ^ 1 ' ^ V 

lot move about latcv-. 

hemes aho-thev- v-ulc -to 
do cy>3£.~i sSmnc "tKihA "fco 

the <hZ> dcnr»Ch"t. 


color : maroon 


How about a different 
font for the lounge headings? 
Make them really stand out. 
rm seeing big, clean, gray... 


0 



Actually, because these rules are exactly the same, we 
can combine them, like this: 




hi, h2 { 


font-family: 

sans-serif; 

color : 

gray; 

} 



To 价如 a 一 C ^ w0lrc 0 於 
clc wt ,) 必七 kcWcn 

i\st scIctW) I'kc 


l\kc w ^l, 


P 

} 


color : maroon 


Test drive... 

Add this new CSS to your “lounge.html” file 
and reload. You’ll see that with one rule, you’ve 
selected both the <hl> and <h2> headings. 



0 O © 

Head First Lounge 

◄ ► 


+ ^ file:///chapter7/lounge/lounge.html 



Welcome to the Head First Lounge 


HI 


m 


doi\\ -tVic V^cadmjs 
⑽ i\\c pay av-c 嘛 ^ 

s*tylcdi a sar\s—scv-»*f 
-font a^d Colored 呀叫 . 


Join us any evening for refreshing elixirs, conversation and maybe a game or two of 
Dance Dance Revolution, Wireless access is always provided; BYOWS (Bring your 
own web server). 

Directions 

You'll find us right in the center of downtown Wcbvillc. If you need help finding us, 
check out our detailed directions. Come join us! 
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Lefs put a line under the welcome message too 

Let’s touch up the welcome heading a bit more. How about a line under it? That 
should set the main heading apart visually and add a nice touch. Here’s the 
property we’ll use to do that: 


border-bottom : lpx solid black; 



V . 




This pvopev-ty doh-tv-ols 
how the bovdev- uhdev" 
clcmch-t looks. 




The trouble is, if we add this property and value to the combined hi, h2 
rule in our CSS, we’ll end up with borders on both our headings: 


hi 


f 



font-family : sans-serif; 

color : gray; 


border-bottom : lpx solid black; 




{jo 七 he bo 七 W bovdev 

k <V^I> a^d 



… y/e bo"t"torn boirdev's 

both ou\r headiK>9s. Hoi - - 

v/hat wc wah-fc. 


So, how can we set the bottom border 
on just the <hl> element, without 
affecting the <h2> element? Do we have 
to split up the rules again? Turn the 
page to find out... 


Head First Lounge 


0 O 0 

4 ~►~] I C I I + I ^ file:///chapter7/lounge/lounge.html 


Welcome to the Head First Lounge 


Ml 


Join us any evening for refreshing elixirs, conversation and maybe a game or two of 
Dance Dance Revolution. Wireless access is always provided; BYOWS (Bring your 
own web server). 

Directions 

You'll find us right in the center of downtown Wcbvillc. If you need help finding us, 
check out our detailed directions. Come join us! 


A 
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getting more sophisticated with selectors 


Wc have the technology: specifying a 
second ruk just for the <hl> 

We don’t have to split up the hi, h2 rule, we just need to add another 
rule that is only for hi and add the border style to it. 

Tk Uc slays 仏 c saw. 

still use a tombmed 'rule 

^ov- a^a co\or W 

both <V>I> <W»>’ 


<h/>: the bovdev-bo-t-bm 


Another test drive... 

Change your CSS and reload the page. You’ll see that the new rule 
added a black border to the bottom of the main heading, which gives 
us a nice underline on the heading and really makes it stand out. 


BuU ow wc v c adding a second ^ 
that adds ahothev- 1 ^ 




hi, h2 { 

font-family: 
color : 

} 


sans-serif 
gray; 




P 


color : maroon 


ttcv-cs *tV\C ^ 
bottom kovdev- 
•m blatk. 


y^o bovdev- 
hcv-c—just what 
y/c waited. 



0 0 0 Head First Lounge 

[< ► ] [ C ] [ + ] ^ file:///chapter7/lounge/lounge.html 


Welcome to the Head First Lounge 



Join us any evening for refreshing elixirs, conversation and maybe a game or two of 
Dance Dance Revolution. Wireless access is always provided; BYOWS (Bring your 
own web server). 

Directions 

You'll find us right in the center of downtown WcbviUc. If you need help finding us, 
check out our detailed directions. Come join us! 


A 
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tJiereiare no ^ 

Dumb Questi9ns 


So how does that work when you 
have more than one rule for an element? 

You can have as many rules as you 
want for an element. Each rule adds to the 
style information of the rule before it. In 
general, you try to group together all the 
common styles between elements, like we 
did with <h1> and <h2>, and then any style 
that is specific to an element, you write in 
another rule, like we did with the border- 
bottom style for the main heading. 


What’s the advantage of that 
approach? Isn’t it better to organize each 
element separately, so you know exactly 
what styles it has? 

Not at all. If you combine common 
styles together, then if they change, you 
only have to change them in one rule. If you 
break them up, then there are many rules 
you have to change, which is error-prone. 


Why do we use a bottom border to 
underline text? Isn’t there an underline 
style for text? 

Good question. There is an underline 
style for text and we could use that instead. 
However, the two styles have slightly 
different effects on the page: if you use 
border-bottom, then the line will extend to the 
edge of the page. An underline is only shown 
under the text itself. The property to set text 
underline is called text-decoration and has a 
value of “underline” for underlined text. Give 
it a try and check out the differences. 


So, how do selectors really work? 


You’ve seen how to select an element to style it, like this: 


Wc ca\\ to 如 sele 乙 W 




color : gray; 


TVic style is applied *to elemerrU 
dcs6\r'ibcd by selector — m tWis 

tasC) <VJ> clcw>cir\*b. 


Or how to select more than one element, like this: 


sclc^-tov-. The style is applied -to <hl> 扣 d <\\2> 




hi, h2 { 

color : gray; 


You’re going to see that CSS allows you to specify all kinds of selectors that determine which elements 
your styles are applied to. Knowing how to use these selectors is the first step in mastering CSS, and 
to do that you need to understand the organization of the HTML that you’re styling. After all, how 
can you select elements for styling if you don’t have a good mental picture of what elements are in the 
HTML, and how they relate to one another? 


So, let’s get that picture of the lounge HTML in your head, and then we’ll dive back into selectors. 
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drawing the lounge’s structure 



Markup Magnets 


Like 


Remember drawing the hierarchy diagram of HTML elements in 
Chapter 3? You’re going to do that again for the Lounge’s main page. 
Below, you’ll find all the element magnets you need to complete the 
diagram. Using the Lounge’s HTML (on the right), complete the tree 
below. We’ve done a couple for you already. You’ll find the answer in 
the back of the chapter. 
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<! doctype html> TiiC H*edd Fiv-s*t 

<html> ^ Lounge HTML 

<head> 

<meta charset="utf-8 M > 

<title>Head First Lounge</title> 

<style> 

hi, h2 { 

font-family : sans-serif; 

color : gray; 

} 

hi { 

border-bottom : lpx solid black; 

} 

P i 

color : maroon; 

} 

</style> 

</head> 

<body> 

<hl>Welcome to the Head First Lounge</hl> 

<P> 

<img src="images/drinks.gif" alt="Drinks M > 

</p> 

<P> 

Join us any evening for refreshing 

<a href= n beverages/elixir .html n >elixirs</a>, 

conversation and maybe a game or two 
of <em>Dance Dance Revolution</em>. 

Wireless access is always provided; 

BYOWS (Bring your own web server). 

</p> 

<h2>Directions</h2> 

<P> 

You 1 11 find us right in the center of downtown 
Webville. If you need help finding us, check out our 

<a href= n about/directions .html n >detailed directions</a>. 

Come join us! 

</p> 

</body> 

</html> 
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visual selectors 


Seeing selectors visually 

Let’s take some selectors and see how they map 
to the tree you just created. Here’s how this “hi” 
selector maps to the graph: 


hi 


font-family : sans-serif 


TVis sclc£.*tov- any 

m fay ， 

dy\d or\ly oy\C 


Wc 乙 an only style 
clcmcr\*b m body ； 
so >/cVc Ktot sV^oy/m^ 

<\\tad> element 
and cvcvytiim^ undev- it 



And here’s how the “hi, h2” selector looks: 


hi, h2 { 

font-family : sans-serif; 


(vfoY/ i\\t st\ttb»r 
<V^2-> clcwcv^s 



If we use a M p w selector ， here’s how that looks: 


p 


font-family : sans-serif; 


TKis sclcd*tov dll 

<p> clcmcr\*ts \v\ *tKc {xtt- 
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Sharpen your pencil 


Color in the elements that are selected by these selectors: 


p, h2 { 

font-family : sans-serif; 



p, em { 

font-family : sans-serif; 
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winning with css 


The Case of Brute Force Versus Style 


Fiye^lnute 

Mystery 



When we last left RadWebDesign in Chapter 4, they had just 
blown the corporate demo and lost RobotsRUs^ business. 
GorrectWebDesign was put in charge of the entire RobotsRUs 
site and got to work getting everything nailed down before the 
site launch later in the month. But you’ll also remember that 
RadWebDesign decided to bone up on their HTML and CSS. 

They decided to rework the RobotsRUs site on their own, using 
proper HTML and stylesheets, just to get some experience 
under their belt before they took on another consulting job. 


As fate would have it, just before RobotsRUs’s big site launch, 
it happened again: RobotsRUs called GorrectWebDesign 
with an urgent message. “We’re changing our corporate look 
and we need all the colors, backgrounds, and fonts changed on 
our site.” At this point, the site consisted of almost 100 pages, so 
GorrectWebDesign responded that it would take them a few days 
to rework the site. “We don’t have a few days!” the CEO said. 
Desperate, the CEO decided to call in RadWebDesign for help. 
“You flubbed up the demo last month, but we really need your help. 
Gan you help the GorrectWebDesign guys convert the site over to 
the new look and feel?” RadWebDesign said they could do better 
than that; in fact, they could deliver the entire site to them in less 
than an hour. 


Hovo did RadWebDesign go from disgrace to xsoeb page 
superheroes? What allozved them to change the look and 
feel of 100 pages faster than a speeding bullet? 
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fretting the lounge style into the 
elixirs and directions pages 

It’s great that we’ve added all this style to “lounge.html”，but what 
about “elixir.html” and “directions.html”？ They need to have a look 
that is consistent with the main page. Easy enough.. .just copy the style 
element and all the rules into each file, right? Not so fast. If you did that, 
then whenever you needed to change the style of the site, you’d have to 
change every single file — not what you want. But luckily, there is a better 
way. Here’s what you’re going to do: 

Take the rules in “lounge.html” and place 
them in a file called “lounge.css”. 

Create an external link to this file from 
your “lounge.html” file. 

Create the same external links in “elixir.html” 
and “directions.html”. 

Give all three files a good test drive. 


❶ 

❺ 

❺ 

O 
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creating a css file 


Creating the "louwge.css" file 

You’re going to create a file called “lounge.css” to contain the style rules 
for all your Head First Lounge pages. To do that, create a new text file 
named “lounge.css” in your text editor. 



Cv-ca*tc W 1 。叫 c.“s m 
w low 呼” -foldcv 
(*tV>c voo-b ^oldcv-). 

tsll CSS 

Jp»lcs 士 


directions.html 




lounge.html 


elixir.html 


I loot 

V ,,0,0 1 —w 

OOIOIOI tool 1 ^ 

lioioiljj uioiod 

—Kgreen.jpg ooiou* 

11 ^ lOIOlljJ 

blue.jpg 


ooioiol 

red.jpg lightblue.jpg 


Now type, or copy and paste from your “lounge.html” file, the CSS rules 
into the “lounge.css” file. Delete the rules from your “lounge.html” file 
while you’re at it. 


Note that you should not copy the <style> and </style> tags because 
the “lounge.css” file contains only CSS, not HTML. 


hi, h2 { 

font-family : sans-serif; 
color : gray; 



Youv w lour\^c 6ss ， -f »lc 
should look like *tW»s. 


Rcw'CW'kcV) Y\0 <S*tYlc> 


lay! 


hi { 

border-bottom: lpx solid black; 


P { 

color : maroon; 
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Unking from "louMgc-html" to the external stylesheet 

Now we need a way to tell the browser that it should style this page with the 
styles in the external stylesheet. We can do that with the HTML <link> 
element. Here’s how you use the <link> element in your HTML: 


<!doctype html> 
<html> 


<head> 

<meta charset= n utf-8 n > 
<title>Head First Lounge</ title> 


HTML 七 Imks 
{jo stylesheet 


<link type="text/css" rel= n stylesheet" href="lounge.css M > 


<style> 

</style> 

</head> 

<body> 



doh^-t heed the <sty| c > elc^i 
jus-t delete it 


<hl>Welcome to the Head First Lounge</hl> 


<p> 

<img src= M drinks.gif" alt= M Drinks n > 
</p> 



The rcsi J HTML *»s saw. 


</p> 

</body> 

</html> 



HTML Up Ckse 


Let’s take a closer look at the <link> element since you haven’t seen it before: 

». The type o( 七 his 'm-fo\rnr»atio^ is Css 1 — a j ± 

认 m °^ CY， ^ovds, a CSS stylesheet M o( 七 he 

^ -bov\ you dem’t need 七 his a^yrwovc (its 

optical), bu 七 you nr^y see it cm oldcv pays 

\ , . 

<link type="text/css n rel="stylesheet" href="lounge.css n > 

、 / 

The v-d attribute spcdi-f ics *bhc \rcla*tio^ship between *bhc 

HTML -file air\d *thc youVc Imk'mj *fco. WcVc I'mk'mj -fco 

a stylesheet so wc use *tKc value w s*tylcshcc*b w - 


stylesheet is located ai 



this h\rc-f (ih -this dasc, wcVc us'ma 
^ relative lihk, but ii dould be a 
-full—blov/h URL). 

/ 


<li^> is a void 
/t ^ ho dosi^ ^ 
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creating an external link 


Unking from "clixir-html" awd "directiows.html" 
to the external stylesheet 

Now you’re going to link the “elixir.html” and “directions.html” files just 
as you did with “lounge.html”. The only thing you need to remember is 
that “elixir.html” is in the “beverages” folder, and “directions.html” is in the 
“about” folder, so they both need to use the relative path “../lounge.css”. 


So, all you need to do is add the following <link> element to both files: 


<!DOCTYPE html> 
<html> 


<head> 

<meta charset= n utf-8 n > 


<title>Head First Lounge Elixirs</title> 

<link type= n text/css n rel= n stylesheet" href= n ../lounge.css n > 
</head> 


<body> 


,, 

^ — This is di^iv lvtml . Just add the <lmk> Ime. 


</body> 

</html> 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= n utf-8 n > 


<title>Head First Lounge Directions</ title> 

<link type= n text/css" rel="stylesheet" href /lounge • css'▼> 
</head> 

<body> 

Sawe (&r Add ihe <|i,k> lm e h 的 . 

</body> 

</html> 
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Test driving the cwtire lounge 


Save each of these files and then open 
“lounge.html” with the browser. You should 
see no changes in its style, even though the 
styles are now coming from an external file. 
Now click on the “elixirs” and “detailed 
directions” links. 

Wow! We have a whole new style for the 
Elixirs and Directions pages with only a one- 
line change to the HTML in each file! Now you 
can really see the power of CSS. 


000 

Head First Lounge Elixirs 

间 0 

^ file:///chapter7/lounge/beverages/elixir.html 


Our Elixirs 


Green Tea Cooler 



v Chock full of vitamins and minerals, this elixir combines the healthful benefits of 
green tea with a twist of chamomile blossoms and ginger root. 


Rasoberry Ice Concentration 


BOO 


Head First Lounge 


C 


file:///chapter7/lounge/lounge.html 


Welcome to the Head First Lounge 


ffl 


ombining raspberry juice with lemon grass, citrus peel and rosehips, this icy 
make your mind feel clear and crisp. 


»erry Bliss Elixir 


Join us any evening for refreshing elixirs, conversation and maybe a game or two of 
Dance Dance Revolution. Wireless access is always provided; BYOWS (Bring your 
own web server). 

Directions 

You'll find us right in the center of downtown Wcbvillc. If you need help finding us, 
check out our detailed directions. Come join us! 


lucbcrric 

arclaxa 

>erry 


Wake up 


000 


Head First Lounge Directions 


◄ ► 

c 

+ 



file:///chapter7/lounge/about/directions. html 


Directions 


Take the 305 S exit to Wcbvillc - go 0.4 mi 

Continue on 305 - go 12 mi 

Turn right at Structure Avc N - go 0.6 mi 

Turn right and head toward Structure Avc N - go 0.0 mi 

Turn right at Structure Avc N - go 0.7 mi 

Continue on Stucturc Avc S - go 0.2 mi 

Turn right at SW Presentation Way - go 0.0 mi 
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use css for flexibility 


Flve^lnute 

Mystery 





The Case of Brute Force Versus Style 

So, how did RadWebDesign become web page superheroes? 
Or maybe we should first ask how the “do no wrong’’ 
GorrectWebDesign firm flubbed things up this time? The 
root of the problem was that GorrectWebDesign was creating 
the RobotsRUs pages using circa-1998 techniques. They 
were putting their style rules right in with their 
HTML (copying and pasting them each time), 
and, even worse, they were using a lot of old 
HTML elements like <font> and <center> 
that have now been deprecated (eliminated 
from HTML). So, when the call came to change 
the look and feel, that meant going into every web 
page and making changes to the CSS. Worse, it meant 
going through the HTML to change elements as well. 

Compare that with what RadWebDesign did: they used 
HTML5, so they had no old presentation HTML in their 
pages, and they used an external stylesheet. The result? To 
change the style of the entire site, all they had to do was 
go into their external stylesheet and make a few changes to 
the CSS, which they easily did in minutes, not days. They 
even had time to try out multiple designs and have three 
different versions of the CSS ready for review before the site 
launch. Amazed, the RobotsRUs GEO not only promised 
RadWebDesign more business, but he also promised them 
the first robot that comes off the assembly line. 
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getting started with css 


Sharpen your pencil 


Now that you’ve got one external style file (or "stylesheet”)，use it to change all the 
paragraph fonts to "sans-serif” to match the headings. Remember, the property to 
change the font style is "font-family”, and the value for sans-serif font is "sans-serif”. 
You’ll find the answer on the next page. 


see 


Head First Lounge 


I C I I + I 2 file:///chapter7/lounge/lounge.html 


TV^c V^cad'my use sa^s-sen-f 

y/WA dov^i v^avc sev^s a^d V^avc a 

vcv-y look. 



Welcome to the Head First Lounge 




The fav-ayaphs still use *cn 
dc-Paul*t sevi-r +o^*ts, y/hidh 
have scv-i-Ps, av-c 
dor>sidcv-cd mov-c di-P-Pidult b> 

redd oy\ a domfu*tcv- street 


•aphs s*till use *thc- 


Join us any evening fo ^ ^ ^ 
Dance Dance Revolut r-^- — 
own web server). 


Head First Lounge Elixirs 


I C I I + ) •; flle:///chapter7/lounge/beverages/elixir.html 


a 



Directions Our Elixirs 


You'll find us right in i 
check out our detailed 


Green Tea Cooler 



v Chock ftill of vitamins and minerals, this elixir combines ihc hcalihftil beneflis of 
green tea with a twist of chamomile blossoms and ginger root. 


Raspberry Ice Concentration 


Comhining raspberry juice with lemon graw, citriK peel anrl mschips, this icy 
drink will make your mind feel clear and crisp. 


Blueberry Bliss Elixir 


eoo Head First Lounge Directions 

[< - I [ C ! f + ] - hlc:///criapter//loungc/about/dircctions.htmi 

Directions 


• BlUCbCITlCS and chi l ake the 305 S exit to Wcbvillc - go 0.4 mi 
put you in a relaxed state ot 




Scv-i-ps 


Cranberry Antic 


Continue on 305 - go 12 mi 

Tum right at Stnjcturc Avc N • go 0.6 mi 

Turn right and head toward Structure Avc N - go 0.0 1 

Turn right at Stmcturc Avc N - go 0.7 mi 

Continue on Stucturc Avc S - go 0^ mi 

Tum right at SW Presentation Way - go 0.0 mi 


Wake up to the f 
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understanding inheritance 


^harpen your pencil 

Solution 


Now that you’ve got one external style file (or "stylesheet”)，use it to change 
all the paragraph fonts to "sans-serif” to match the headings. Remember, the 
property to change the font style is "font-family”, and the value for sans-serif 
font is "sans-serif”. Here’s our solution. 


hi, h2 


font-family : 
color : 


sans-serif ( 
gray; 


hi 


border-bottom : lpx solid black, 


P 


font-family : sans-serif 

color : maroon; 



Jus*t add a family fv-opcv-ty 
{o youv- vulc'm -the 

w |ou^Jc.dss w -pile. 



rm wondering if that is really the best 
solution. Why are we specifying the font-family 
for EACH element? What if someone added a 
<blockquote> to the page—would we have to then 
add a rule for that too? Can’t we just tell the 
whole page to be sans-serif? 
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getting started with css 


Ifs time to talk about your inheritance... 


Did you notice when you added the font-family 
property to your p selector that it also affected the 
font family of the elements inside the <p> element? 
Let’s take a closer look: 


o o o 


Head First Lounge 






file:///chapter7/lounge/lounge.html 


Welcome to the Head First Lounge 


70^ added 

U 七丄 “7 ?代?吖切 k 二减 
QSS d sclcdW) 

Ui ^ ^ 7 ouyr 

clcmc^. But also t^tA 

Ui ^ ^ ^ uks 

av^d cm^asiziid 七亡此 


Join us any evening for refreshing elixirs, conversation and maybe a game or 
two of Dance Dance Revolution. Wireless access is always provided, BYOWS 
(Bring your ^\web server). 

Dire^J^is 

You'll find us right in the center of downtown Webville. If you need help finding 
us, check out our detailed directions. Come join us! 





Ko*t cvev-y s-tylc »s 
mV^rrted. Oust some 
3V"C> like -fsw'ily- 


The elements inside the <p> element inherit the 
font-family style from <p> 

Just like you can inherit your blue eyes or brown hair from your parents, elements can 
inherit styles from their parents. In this case, the <a> and <em> elements inherited the 
font-family style from the <p> element, which is their parent element. It makes sense 
that changing your paragraph style would change the style of the elements in the paragraph, 

doesn’t it? After all, if it didn’t, you’d have to go in and add CSS rules for every inline — to wWU ^ ^ 

element in every paragraph in your whole site.. .which would definitely be so NOT fun. ^ cvvov— 

Let’s take a look at the HTML tree to see how inheritance works: 

l-p v/c set all tKc <p> 

\\trt avc all demits would be 


and 
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moving rules to the body element 


What if wg move the fowt up the family tree? 

If most elements inherit the font-family property, what if we move it up to 
the <body> element? That should have the effect of changing the font for all 



Kavc 七 e% 七 . 

Wow, this is poy/cv-*rul. Simply by the 

family p\ropcv-*by'm the body \rulc, wc 
乙 ould dha 竹 3c the -fov- By\ site- 


What are you waiting for...give it a try 

Open your “lounge.css” file and add a new rule that selects the <body> element. 

Then remove the font-family properties from the headings and paragraph 
rules, because you’re not going to need them anymore. 

tteves Y/V^at youVc 50*^5 *to do. 

body { add a ^ vulc 

七 <bodv> clcmcv't T\\t^ add the 
Wt - ^ a value 

of say>s-scv-^. 


font-family: sans-serif; 


hi, h 2 { 

font family :— sans serif; 

color : gray; 


hi 


P 



-take 七 he family 

pv-opev-ty ou*t 七 he hi, VL 

border-bottom : lpx solid black; I 丨 ^ 7 11 ~ 丄》 i 

c ' \rulc, as y/dl ds tnc p \ruk- 


font family :- sans serif; 

color : maroon; 
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getting started with css 


Test drive your new CSS 

As usual, go ahead and make these changes in the “lounge.css” 
stylesheet, save, and reload the “lounge.html” page. You shouldn’t 
expect any changes, because the style is the same. It’s just coming 
from a different rule. But you should feel better about your CSS, 
because now you can add new elements to your pages and they’ll 
automatically inherit the sans-serif font. 


SuV"PVisc> suvpv"isc- TKis docsy> "t look 3 ir>y 
d.1 过饮 ⑶ i a 七 all, loui is v/c 

y/ere is^*t *rt? All you've dorst is move 

七 he s3r>s—scv-i-r uf m*to body vulc 

U all 七 he ctKcv clcr«cir>*ts 七 hat 



000 

A 


Welcome to the Head First Lounge 

ii 


Join us any evening for refreshing elixirs, conversation and maybe a game or 
two of Dance Dance Revolution. Wireless access is always provided, BYOWS 
(Bring your own web server). 

Directions 

You'll find us right in the center of downtown Webville. If you need help finding 
us, check out our detailed directions. Come join us! 



Head First Lounge 


file:///chapter7/lounge/lounge.html 



Okay, so now that the whole site is set 
to sans-serif with the body selector, what 
if I want one element to be a different 
font? Do I have to take the font-family 
out of the body and add rules for every 
element separately again? 
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when you don’t want to inherit 


Overriding mheritance 


By moving the font-family property up into the body，you’ve set that 
font style for the entire page. But what if you don’t want the sans-serif 
font on every element? For instance, you could decide that you want <em> 
elements to use the serif font instead. 





Y you you, < c .> 

tcad. y ou hccd ^ ovc ^ idc ihc 7 

乙 e with a CSS 〜| e . 


Well, then you can override the inheritance by supplying a 
specific rule just for <em>. Here’s how you add a rule for <em> 
to override the font-family specified in the body: 


body { 

font-family: sans-serif; 

} 

hi, h2 { 

color : gray ; 

} 

hi { 

border-bottom : lpx solid black; 


P 

} 

em 


color : 


maroon; 


font-family: serif; 


To ov^a, ^ W-W-'y 

^vofCV-tY value sc-t -to sc\n 
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getting started with css 


Test drive 

Add a rule for the <em> element to your CSS with a 
font-family property value of serif, and reload 
your “lounge.html” page: 


ihai ihc Vaut 

Rcvolutioh W whidh is the 
"texi ih the <cm> elemeni, is 
now a sc\ri-p -Poht. 


As a general rule, it’s not a good idea to change 
fonts in the middle of a paragraph like this, so go 
ahead and change your CSS back to the way it was 
(without the em rule) when you’re done testing. 


❸ Q 6 __ 


Head First Lounge 


^ file:///chapter7/lounge/lounge.html 



Welcome to the Head First Lounge 




Join us any evening for refreshing elixirs, conversation and maybe a game or 
two of Dance Dance Revolution. Wireless access is always provided; BYOWS 
(Bring own web server). 

Directions 

You'll find us right in the center of downtown Webville. If you need help finding 
us, check out our detailed directions. Come join us! 




thereicire no ^ 

Dumb Questions 


How does the browser know which 
rule to apply to <em> when I’m overriding 
the inherited value? 

With CSS, the most specific rule 
is always used. So, if you have a rule for 
<body>, and a more specific rule for <em> 
elements, it is going to use the more specific 
rule. We’ll talk more later about how you 
know which rules are most specific. 

How do I know which CSS 
properties are inherited and which are 
not? 

This is where a good reference really 
comes in handy, like O’Reilly’s CSS Pocket 
Reference. In general, all of the styles that 
affect the way your text looks, such as font 
color (the color property), the font-family, 
as you've just seen, and other font-related 
properties such as font-size, font-weight (for 
bold text), and font-style (for italics) are 


inherited. Other properties, such as border, 
are not inherited, which makes sense, right? 
Just because you want a border on your 
<body> element doesn’t mean you want it 
on all your elements. A lot of the time, you 
can follow your common sense (or just try 
it and see), and you’ll get the hang of it as 
you become more familiar with the various 
properties and what they do. 

C^: Can I always override a property 

that is being inherited when I don’t want 
it? 

Yes. You can always use a more 

specific selector to override a property from 
a parent. 


C^: This stuff gets complicated. Is there 

any way I can add comments to remind 
myself what the rules do? 

Yes. To write a comment in your 

CSS, just enclose it between /* and */_ For 
instance: 

/* this rule selects all 
paragraphs and colors them 
blue */ 

Notice that a comment can span multiple 
lines. You can also put comments around 
CSS and browsers will ignore it, like this: 

/* this rule will have no 
effect because it's in a 
comment 

p { color : blue; } */ 

Make sure you close your comments 
correctly; otherwise, your CSS won’t work! 
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styling individual paragraphs 



I was thinking it would be 
cool to have the text below 
each elixir match the color of 
the elixir. Can you do that? 


We’re not sure we agree with the 
aesthetics of that suggestion, but 
hey, you’re the customer. 

Gan you style each of these paragraphs separately 
so that the color of the text matches the drink? The 
problem is that using a rule with a p selector applies the 
style to all <p> elements. So, how can you select these 
paragraphs individually? 

That’s where classes come in. Using both HTML and 
CSS, we can define a class of elements, and then apply 
styles to any element that belongs to that class. So, what 
exactly is a class? Think of it like a club — someone starts 
a “greentea” club, and by joining you agree to all the 
rights and responsibilities of the club, like adhering to 
their style standards. Anyway, let’s just create the class 
and you’ll see how it works. 


Creating a class takes two steps: first, we add the 
element to the class by adding a class attribute to the 
element in the HTML; second, we select that class in 
the CSS. Let’s step through that". 





Blue 



Puv-flc 



Red wc 

d 。 灼’七 r\tt& *to 
-this oy \ c - 



H O Head First Lounge Elixirs 



Our Elixirs 


Green Tea Cooler 


Chock full of vilarmns and minerals, ttus elixir oombinos tho hooMhM benefits of 
green tea with a twist of chamomile Wossoms aod gir>ger root 

Raspberry Ice Concentration 


l Combining raspberry juic« with lamon ^rass, citrus p««l and rosehips, this icy 
drink will mako your m«nd feol clear and chsp. 

Blueberry Bliss Elixir 



- Bluobomos and cherry essence mixed into a base of oklorflowor herb toa will 

put you in a relaxed state of bliss in no time. 

Cranberry Antioxidant Blast 


• Wake up lo the flavors ol cranberry and hibiscus In this vitamin C rich elixir. 



- 
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Adding an dement to the greewtea class 

Open up the “elixir.html” file and locate the “Green Tea Cooler” paragraph. 

This is the text we want to change to green. All you’re going to do is add the <p> 
element to a class called greentea. Here’s how you do that: 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset= M utf-8 n > 

<title>Head First Lounge Elixirs</title> 

<link type= M text/css H rel= n stylesheet” href 
</head> 

<body> 

<hl>Our Elixirs</hl> 

<h2>Green Tea Cooler</h2> 

<p class= n greentea'▼> 

<img src= n ../images/green.jpg" alt= n Green Tea"> 

Chock full of vitamins and minerals, this elixir 
combines the healthful benefits of green tea with 
a twist of chamomile blossoms and ginger root. 

</p> 

<h2>Raspberry Ice Concentration</h2> 

<p> 

<img src= n ../images/lightblue.jpg" alt="Raspberry Ice n > 

Combining raspberry juice with lemon grass, 
citrus peel and rosehips , this icy drink 
will make your mind feel clear and crisp. 

</p> 

<h2>Blueberry Bliss Elixir</h2> 

<P> 

<img src= M ../images/blue.jpg" alt= M Blueberry Bliss M > 

Blueberries and cherry essence mixed into a base 
of elderflower herb tea will put you in a relaxed 
state of bliss in no time. 

</p> 

<h2>Cranberry Antioxidant Blast</h2> 

<P> 

<img src= M ../images/red.jpg" alt= n Cranberry Blast M > 

Wake up to the flavors of cranberry and hibiscus 
in this vitamin C rich elixir. 

</p> 

</body> 

</html> 


="../lounge.css"> 

〆 ^ To add *to a dlass, jus*t add 

•the a*t*tv-ibu*tc w dlass w a\oY\^ w 知 

Y\an\t dlass, like 


Now that the green tea paragraph belongs to the greentea class, you just need to 
provide some rules to style that class of elements. 
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Creating a class selector 


To create a class in CSS and select an element in that class, you write a 
class selector, like this: 


Thcr\ use a w W *bo 
sfc^i-Py a dlass. 


Las*t is the 

dass 的 dmc. 


eleme^i m iheP • green tea 
^lass -fiv-s-t—*m color : 

this p. } 

The sclc^-tov- p.gv-cchtca 
^clcdis dll pdird^lrdplis ih 
gircch-tca class. 


green; 



Ahd Ws the v-ulc...makc 
叫 "twt m a fav-a0^fh 
,h g^cch-tca dass the 

匕 olov~ gvcch. 


So now you have a way of selecting <p> elements that belong to a certain class to 
style them. All you need to do is add the class attribute to any <p> elements you 
want to be green, and this rule will be applied. Give it a try: open your “lounge.css” 
file and add the p. greentea class selector to it. 


body { 

font-family: sans-serif; 


hi, h2 { 

color : gray; 


hi { 

border-bottom : lpx solid black; 


P { 

color : maroon; 


p.greentea { 

color : green; 
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A grcewtea test drive 

Save and then reload to give your new class a test drive. 


HevVs 七 he yeerrtea 

^lass applied bo 七 he 
pavayafiv No … 七^仏七 

is d^d w\3*t4^CS *biic 

6fcttr\ Tea Cooler. Maybe 
七 his s-byl'm^ y/as\r / 七 sud a 
bad idea a*f 七 ev all. 


0 0 0 Head First Lounge Elixirs 

-~l 1 Z 1 王 1 — file:///chapter7/lounge/beverages/elixir.html 


Our Elixirs 


Green Tea Cooler 



、 Chock full of vitamins and minerals, this elixir combines the healthful benefits of 
green tea with a twist of chamomile blossoms and ginger root. 


Raspberry Ice Concentration 


Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy 
drink will make your mind feel clear and crisp. 

Blueberry Bliss Elixir 



，— Blufihfirrifis and cherry essfinefi mixed into a hase of fildfirflnwer herb tea will 
put you in a relaxed state of bliss in no time. 

Cranberry Antioxidant Blast 


Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir. 




^|harpen your pencil 

Your turr 


Your turn: add two classes, "raspberry” and "blueberry”, to the correct 
paragraphs in "elixir.html", and then write the styles to color the text blue and 
purple, respectively. The property value for raspberry is "blue" and for blueberry 
is "purple”. Put these at the bottom of your CSS file, under the greentea rule: 
raspberry first, and then blueberry. 



YcaV^, y/c know youVc pv-obably 七 Wmkm 少 how 
a v-aspbevv-y be blue? IAfell> i-f Raspbcv-v-y 
^ool-A'»d blue, tiiaVs y>od \or us. 

/W scviously, you blcr^d up a \)\AY\CM o\ 
bluebevries, tlicy \rcally avc fuvflc 
blue. Wovk y/rth us iicvc- 


you are here ► 


289 
















dealing with class selectors 


Taking classes further... 

You’ve already written one rule that uses the greentea class to change any 
paragraph in the class to the color “green ”： 


p.greentea { 

color : green; 


But what if you wanted to do the same to all <blockquote>s? 
Then you could do this: 


blockquote.greentea, 
color : green; 


p.greentea { 



And in your HTML you’d write: 

〈blockquote class="greentea"> 


Jus-t add a^o-thcv- sclcd-bov- -fco handle 
<blodk^uo*tc>s 七 ha 七 av-c m 七 he yee 灼七 ea 
dlass. Nov/ -this v-ulc will apply -fco <p> 
drtd <blo^k^uo*tc> 
dlass. 



So what if I want to 
add <hl>, <h2>, <h3> / <p> y and 
cblockquote> to the greentea 
class? Do I have to write one 
huge selector? 


No, there’s a better way. If you want all 
elements that are in the greentea class to 
have a style, then you can just write your 
rule like this: 


greentea { 

color : green; 



l-P you leave ou 七 all 七 he Mmes, 

and jus-t use a pev-iod -followed by a dlass 
的 arwc ， "the 的 \rulc will apply ho all 

merwbev-s o( *thc ddss. 
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Cool! Yes, that works. One 
more question...you said being in 
a class is like being in a club. Well, 
I can join many clubs. So, can an 
element be in more than one class? 


Yes, elements can be in more than one class. 

It’s easy to put an element into more than one class. Say 
you want to specify a <p> element that is in the greentea, 
raspberry, and blueberry classes. Here’s how you would 
do that in the opening tag: 


<p class= n greentea raspberry blueberry"> 



So, for example, I 
could put an <hl> into my ''products* 
class that defines a font size and 
weight, and also a ''specials" class 
to change its color to red when 
something's on sale? 


Plate tat\\ 

灼 a〆 W 
vaW oUV^ass 

atthWU , 叫办 a 


O 


o 


Exactly. Use multiple classes when you want 
an element to have styles you’ve defined in 
different classes. In this case, all your <hl> 
elements associated with products have a 
certain style, but not all your products are on 
sale at the same time. By putting your “specials” 
color in a separate class, you can simply add 
only those elements associated with products on 
sale to the “specials” class to add the red color 
you want. 


Now you may be wondering what happens when an element belongs 
to multiple classes, all of which define the same property — like our <p> 
element up there. How do you know which style gets applied? You know 
each of these classes has a definition for the color property. So, will the 
paragraph be green, blue (raspberry), or purple? 

We’re going to talk about this in great detail after you’ve learned a bit 
more CSS, but on the next page you’ll find a quick guide to hold you over. 
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guide to applying styles 


The world's smallest and fastest guide to 
how styles are applied 


Elements and document trees and style rules and classes...it can get downright confusing. 
How does all this stuff come together so that you know which styles are being applied to 
which elements? As we said, to fully answer that you’re going to have to know a little more 
about CSS, and you’ll be learning that in the next few chapters. But before you get there, 
let’s just walk through some common-sense rules of thumb about how styles are applied. 


First do any selectors select your dement? 


Let’s say you want to know the font-family property value for an element. The first thing 
to check is: is there a selector in your CSS file that selects your element? If there is, and it 
has a font-family property and value, then that’s the value for your element. 


What about inheritance? 


If there are no selectors that match your element, then you rely on inheritance. So, look at 
the element’s parents, and parents’ parents, and so on, until you find the property defined. 
When and if you find it, that’s the value. 


Struck out again? then use the default 


If your element doesn’t inherit the value from any of its ancestors, then you use the default 
value defined by the browser. In reality, this is a little more complicated than we’re describing 
here, but we’ll get to some of those details later in the book. 


What if multiple selectors select an element? 


Ah, this is the case we have with the paragraph that belongs to all three classes: 

<p class= n green tea raspberry blueberry ▼▼> 

There are multiple selectors that match this element and define the same color property. 
That’s what we call a conflict. Which rule breaks the tie? Well, if one rule is more specific than 
the others, then it wins. But what does “more specific” mean? We’ll come back in a later 
chapter and see exactly how to determine how specific a selector is, but for now, let’s look at 
some rules and get a feel for it: 
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And if we still don't have a clear winner? 

So, if you had an element that belonged only to the greentea class, there 
would be an obvious winner: the p. greentea selector is the most specific, 
so the text would be green. But you have an element that belongs to all 
three classes: greentea, raspberry, and blueberry. So, p. greentea, 
p. raspberry, and p. blueberry all select the element, and are of equal 
specificity. What do you do now? You choose the one that is listed last in 
the CSS file. If you can’t resolve a conflict because two selectors are equally 
specific, you use the ordering of the rules in your stylesheet file; that is, you 
use the rule listed last in the CSS file (nearest the bottom). And in this case, 
that would be the p. blueberry rule. 





In your “elixir.html” file, change the greentea paragraph to include all the classes, like this: 

<p class= n greentea raspberry blueberry▼▼> 


Save and reload. What color is the Green Tea Cooler paragraph now? 

Next, reorder the classes in your HTML: 

<p class="raspberry blueberry greentea"> 

Save and reload. What color is the Green Tea Cooler paragraph now? 

Next, open your CSS file and move the p.greentea rule to the bottom of the file. 
Save and reload. What color is the Green Tea Cooler paragraph now? 

Finally, move the p.raspberry rule to the bottom of the file. 

Save and reload. What color is the Green Tea Cooler paragraph now? 

After you’ve finished, rewrite the green tea element to look like it did originally: 

<p class= M greentea M > 

Save and reload. What color is the Green Tea Cooler paragraph now? 
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language comparison: css and html 


Fireside Chats 

卿 


Tonight’s talk： CSS & HTML compare languages 


CSS: HTML: 

Did you see that? I’m like Houdini! I broke right 
out of your <style> element and into my own file. 

And you said in Chapter 1 that I’d never escape. 

Don’t get all excited; I still have to link you in for 
you to be at all useful. 

Have to link me in? Gome on; you know your pages 
wouldn’t cut it without my styling. 

Here we go again.. .while me and all my elements 
are trying to keep things structured, you’re talking 
about hair highlights and nail color. 

If you were paying attention in this chapter, you 
would have seen I’m downright powerful in what I 
can do. 

Okay, okay, I admit it; using CSS sure makes my 
job easier. All those old deprecated styling elements 
were a pain in my side. I do like the fact that my 
elements can be styled without inserting a bunch 
of stuff in the HTML, other than maybe an 
occasional class attribute. 

Well now, that’s a little better. I like the new attitude. 


But I still haven’t forgotten how you mocked my 
syntax … 〈 remember 〉？ 
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CSS: 

HTML: 

You have to admit HTML is kinda clunky, but 
that’s what you get when you’re related to an early 
’90s technology. 

I call it standing the test of time. And you think 

CSS is elegant? I mean, you’re just a bunch of rules. 
How’s that a language? 

Are you kidding? I’m very expressive. I can select 
just the elements I want, and then describe exactly 
how I want them styled. And you’ve only just 
begun to see all the cool styling I can do. 

Oh yeah? 

Yup; just wait and see. I can style fonts and text in 
all kinds of interesting ways. I can even control 
how each element manages the space around it on 
the page. 

Hmmm... sounds as if you have a little too much 
power; I’m not sure I like the sound of that. After 
all, my elements want to have some control over 
their own lives. 

Bwahahaha. And you thought you had me 
controlled between your <style 〉 tags. You’re 
going to see I can make your elements sit, bark, 
and roll over if I want to. 

Whoa now! Security.. .security?! 
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Who gets the mheritawee? 

Sniff, sniff; the <body> element has gone to that great browser in the sky. But he left 
behind a lot of descendants and a big inheritance of color “green”. Below, you'll find his 
family tree. Mark all the descendants that inherit the <body> element’s color green. Don’t 
forget to look at the CSS below first. 




-the CSS. IXse tiVis "to 

detev-mme y/hidh o( -the dbove 
elerwerrb IVrt -the jackpot Bv\d 
jrt 七 he jv-cch (dolov-). 
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|.f you iidve cv-\ro\rs'm youv CSS, 
usually 4a 七 happens is all 
below 七 error avc i 沪。代 d. So, 
^c*t m i\\t iiabit lookm^ -for 

CV"V*ov*s y \ o ^) by donr\^ 七 iiis 



BE th^ B 鱗總 

Below, youll find the CSS file "style, 
ess”，widi some errors in it. Your job 
is to play like you’re the browser 

and locate all the errors. 
After you’ve done the 
exercise, look at the end 
of the chapter to see if 
you caught all the errors. 


The 如 、、切 l“ss 


<style> 
body { 

background-color : white 

hi, { 

gray ; 

font-family : sans-serif; 

} 

h2, p { 

color : 


<em> { 

font-style : italic; 

} 

</style> 



you are here ► 


297 



validating css 


The exercise got me 
thinking...is there a way 
to validate CSS like there is 
with HTML? 



鵪 


% 


Of course! 

Those W3C boys and girls aren’t just sitting 
around on their butts, they’ve been working hard. 
You can find their CSS validator at: 


http : //jigsaw.w3.org/css-validator/ 


Type that URL in your browser, and we think 
you’ll feel quite at home when you get there. 
You’re going to find a validator that works almost 
exactly like the HTML 
validator. To use the CSS 
version, just point the 


The WJCCSS V4l ， d«t.c 


validator to your CSS 
URL, upload a file with 
your CSS in it (first tab), 
or just paste it into the 
form (second tab), and 
submit. 

You shouldn’t encounter 
any big surprises, like 
needing doctypes or 
character encodings with 
CSS. Go ahead, give it a 
try (like we’re not going 
to make you do it on the 
next page, anyway). 


Ffj ㈣ 


Oemsch English Es 


km 卩 〜 

闭 体中文 a 


CSS Validation Service 

Ch ° Ck Ca8c ^9St y .e Sheets (CSS) an d (X)HTML docu.ems w„ h 8 t y .e sheets 


By URI 


By file upload 


By direct input 

Validate by URI 

Eo^rneUR.ofa docur^n, (HTML ^ css or CSS on^) you wo oW _赠 

Address: 

► More Options 

Check 


VALIDATOR 


The W3C validators rely on community support for hosting 
and development. 

Donate and help us build better tools for a better web. 

Rrst Uin 如 _ ML — 咖 ,you 


About Documentation Download Feedback Credits 


SbbbQL 




COPYRIGHT ©1994.2009 W3C® (MIT. ERCIM KEIO) ALL 
W3C LIAB ' L,TY ' tidemark. 
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Making sure the lounge CSS validates 

Before you wrap up this chapter, wouldn’t you feel a lot better if all that Head First 
Lounge CSS validated? Sure, you would. Use whichever method you want to get 
your CSS to the W3C. If you have your CSS on a server, type your URL into the 
form; otherwise, either upload your CSS file or just copy and paste the CSS into 
the form. (If you upload, make sure you’re directing the form to your CSS file, not 
your HTML file.) Once you’ve done that, click on Check. 


|-f youv CSS did^-t validate, tKctk 
i-t v/i-tK -tKc CSS a -fc>w batk 
(\y\d d^y small mistakes you've 
made, -tKcia vesubmit 


Yay/ 0\ay CSS validdies as 
CSS Z./ vdlidd'tov* hash^-t 
yyaded to CSS 3 yet but 
i-r i-t has by ihc iime you vead 
i*t should s£i|| validate). 


Here avc some \tons you tan 

:口十 

(;“a”e 七 s.m.U 
vaMatcd HT/V1U ^ 




W5C* 


^ W W C 3C C C S S S S 


W3CC ^ .叫 CSS lev _) 


Jump to: Validated CSS 

W3C CSS Validator results for lounge.css (CSS level 2.； 


• 1 ) 


Found. 


^ Q* Google 


This document validates as CSS lev^i p i ! 

page ^atUdates. HeTelsTe^ML 咖咖 y 


<P> 


蚊 製啤:⑽說 SG , 雖? referer . 


</p> 


</a> 




㈣ 


blue" 


thereiare no o 

Dumb Questi 9 ns 


Do I need to worry if I get 
warnings? Or do what they say? 

It’s good to look them over, but you’ll 
find some are more in the category of 
suggestions than “must do’s_” The validator 
can err on the side of being a little anal, so 
just keep that in mind. 


Just like v/Kc^ you valids'tc HT/V1L- 

torrttibf, you tKc ⑶ bad^c 
suttess^ v/Kc^ you ^>ass valid3"tiov\ 
-for youv CSS. 6\rttr\ is ^ood' 
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getting a feel for some css properties 



top 

position 

<Jc *tV>c 

clewed- 

lett 


、J 


teX t-alW 

Use "tWis yrofcriy to aliy 
your it%i to \^i t 
dcr\-tcv, or vi# 七 . 

er -spaci- TW，S lcts Y ° u sct s?adm5 


Wsc toU io sci -tKc 4h-t 

dolo,r °+ clevis. 


•ng Ict-tcv-s. Like "t ^ 1 s, 


color 


background-color 

C TWis yroycyiy to^broU -tKc 

badk^ound dolor an element. 


W to^° 

TWis is V>ov/ you "tell 
clcmcr\-t V^ov/ to fositio>r\ 
•rb lc-f"t side- 


bord< 



Use "this pv-opev-ty -fov- 
i-talid ov oblique "text 




s^i 




d 9 cd bo < a doiicd bovd ^... ； 


TKis pvo^>cv-ty lets 
C you Ko>w lis-t 

\nn\c \v\ ^ li^. 


P 


This ^v-ofer-ty sc-b -tV^c 
s^>a6c between lines m d 
element 


^ . p 

cd^c o-f 

^>d its 

dor>-tcir>t use padd'm^. 


xis^sty^ 


adding tc-twee^ -the 

3r> elew»eivt d^d 



f ont' 





Use 七 W»S ^o^-tY -to 
an \ma 5 c beWmd 
dn element- 


叫 e 



CSS has a lot of style properties. 
You’ll see quite a few of these in 
the rest of this book, but have a 
quick look now to get an idea 
of all the aspects of style 
you can control with CSS. 




1 


1 


r 
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BULLET POINTS 



It looks like you re getting \ 
the hang of this style stuff. 
Were looking forward to seeing 
what you come up with in the next 
couple of chapters. 


■ CSS contains simple statements, called rules. 

■ Each rule provides the style for a selection of HTML 
elements. 

■ A typical rule consists of a selector along with one or 
more properties and values. 

■ The selector specifies which elements the rule 
applies to. 

■ Each property declaration ends with a semicolon. 

■ All properties and values in a rule go between {} 
braces. 

■ You can select any element using its name as the 
selector. 

■ By separating element names with commas, you can 
select multiple elements at once. 

■ One of the easiest ways to include a style in HTML is 
the <style> tag. 

■ For HTML and for sites of any complexity, you should 
link to an external stylesheet. 


The <link> element is used to include an external 
stylesheet. 

Many properties are inherited. For instance, if 
a property that is inherited is set for the <body> 
element, all the <body>’s child elements will inherit it. 

You can always override properties that are inherited 
by creating a more specific rule for the element you’d 
like to change. 

Use the class attribute to add elements to a class. 

Use a V’ between the element name and the class 
name to select a specific element in that class. 

Use “.classname” to select any elements that belong 
to the class. 

You can specify that an element belongs to more 
than one class by placing multiple class names in the 
class attribute with spaces between the names. 

You can validate your CSS using the W3C validator, 
at http://jigsaw.w3.org/css-validator. 
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time for some mental pushups 



HTMLcross 


Here are some clues with mental twist and turns that will help you burn 
alternative routes to CSS right into your brain! 



Across 

3. Styles are defined in these. 

5. Selects an element. 

8. Each rule defines a set of properties and 


10. Defines a group of elements. 

11. Property that represents font color. 

13. Ornamental part of some fonts. 

14. How elements get properties from their parents. 

15. Property for font type. 


Down 

1. Fonts without serifs. 

2. You can place your CSS inside these tags in an 
HTML file. 

4. An external style file is called this. 

6. With inheritance, a property set on one element is 

also passed down to its_. 

7. Won this time because they used external 
stylesheets. 

9. They really wanted some style. 

12. Use this element to include an external stylesheet. 
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f Markup Magnets Solution 

Remember drawing the hierarchy diagram of HTML elements 
in Chapter 3? You did that again for the Lounge’s main page. 
Here’s our solution. 


Like 七 iVis 





LJ 




body 







met a 


title 


style 
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exercise solutions 


— i^^rpen your pencil 


Your turn: add two classes, ^raspberry 77 and "blueberry" to the 
correct paragraphs in "elixir.html〃and then write the styles 
to color the text blue and purple, respectively. The property 
value for raspberry is "blue” and for blueberry is "purple”. 


body { 

font-family: sans-serif; 


hi, h2 { 


color : gray; 


hi 

} 

P 

} 


border-bottom: lpx solid black; 


see 


Head First Lounge Elixirs 


C 


fi|p7//rhaprpr7/loungp/hpvpr^gp<;/plixir hrml 


color : maroon 


Our Elixirs 


p.greentea { 

color : 


Green Tea Cooler 


green; 



p.raspberry { 
color : 


blue 


v Chock full of vitamins and minerals, this elixir combines the healthful benefits of 
green tea with a twist of chamomile blossoms and ginger root. 


Raspberry Ice Concentration 


p.blueberry { 

color : purple 


、 Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy 
drink will make your mind feel clear and crisp. 


Blueberry Bliss Elixir 


i 


Blueberries and cherry essence mixed into a base of eldertlower herb tea will 
put you in a relaxed state of bliss in no time. 


Cranberry Antioxidant Blast 


Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir. 


A 


304 Chapter 7 























getting started with css 


<!doctype html> 

<html> 

<head> 

<meta charset= M utf-8 M > 

<title>Head First Lounge Elixirs</title> 

<link type= n text/css" rel= M stylesheet" href="../lounge.css n > 
</head> 

<body> 

<hl>Our Elixirs</hl> 

<h2>Green Tea Cooler</h2> 

<p class="greentea n > 

<img src= M ../images/green.jpg" alt= M Green Tea M > 

Chock full of vitamins and minerals, this elixir 
combines the healthful benefits of green tea with 
a twist of chamomile blossoms and ginger root. 

</p> 

<h2>Raspberry Ice Concentration</h2> 

<p class="raspberry M > 

<img src="../images/lightblue.jpg" alt="Raspberry Ice M > 

Combining raspberry juice with lemon grass, 
citrus peel and rosehips, this icy drink 
will make your mind feel clear and crisp. 

</p> 

<h2>Blueberry Bliss Elixir</h2> 

<p class= n blueberry M > 

<img src= M ../images/blue.jpg" alt= n Blueberry Bliss M > 

Blueberries and cherry essence mixed into a base 
of elderflower herb tea will put you in a relaxed 
state of bliss in no time. 

</p> 

<h2>Cranberry Antioxidant Blast</h2> 

<p> 

<img src= M ../images/red.jpg" alt="Cranberry Blast M > 

Wake up to the flavors of cranberry and hibiscus 
in this vitamin C rich elixir. 

</p> 

</body> 

</html> 
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exercise solutions 


§OLuiiOH 


Who gets the mheritawee? 


Sniff, sniff; the <body> element has gone to that 
great browser in the sky. But he left behind a lot of 


descendants and a big inheritance of color “green”. 
Below, you'll find his family tree. Mark all the 
descendants that inherit the <body> element's color 
green. Don’t forget to look at the CSS below first. 


Here’s our solution: 



VJ and Va y 七如 
because 

[oW ^ W 7 . U 6 k 7 仏〜 


h 。 CSS “ 



This ohC cm is -Pov-tuh 
a t 
"the 

⑽加 \rulc oveinridihg the dolov 

v/rth its owh plropeirty, this cm 
•mhc\rrb body's Co\o\r. 


、 / 

W JortunaWy cm ^ 

clcmchts, i\\q a\rc cM\\ArtY\ 

paV"Cir\*ts *bV)3*t oVCV"V"»dc *bV)C 

body tolo\r, *b^c p clcw>cir\t 
So tV^cy do^i jet a^y to\o>r 
*fv-ow> body- 


W 7 如加 . 


is a cM\\A f, so 

docs^t *mV)C/rt tv^c Co\o>r Wor^ 
body* 1*^5 wouldn't jet 3 乙 olor 
“criWe a^yv/ay (poor juy). 
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BE fJi&B 鱗總 §©|ug©ti 

Below, you’ll find the CSS file widi 
some errors in it. Your job was to 
play like you’re the browser and 
)、 - locate all the errors. 

Did you find them all? 




v/ovk m a CSS st/lcsWt 


body { 


background-color : white 

/Wissihg } 


Missmg p\rofC\rty Y\Brnt 
ar>d dolors 


hi} { 


gray ; 

font-family : sans-serif; 


Alissmg sernidolo 灼 


h2 ' p { 

color : 



<em> 


Us'mg the HTML -tag mstcad o( just the 

element Y\Bri\C This should be Cm. 


font-style : italic; 


</style>" 


No </stylc> tags heeded 
ih the CSS 
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exercise solutions 



In your “elixir.html” file, change the greentea paragraph to include all the classes, 
like this: 


<p class= n greentea raspberry blueberry M > 


Save and reload. What color is the Green Tea Cooler paragraph now? 


purple 


Its puv-plc bemuse 
the blucbc\r\ry v-ule is 

〆 last ih the CSS -file. 


Next, reorder the classes in your HTML: 


<p class= n raspberry blueberry greentea M > 


Save and reload. What color is the Green Tea Cooler paragraph now? 


purple 


Next, open your CSS file and move the p.greentea rule to the bottom of the file. 


Save and reload. What color is the Green Tea Cooler paragraph now? 
Finally, move the p.raspberry rule to the bottom of the file. 

Save and reload. What color is the Green Tea Cooler paragraph now? 


yrttY\ 


blue 


After you’ve finished, rewrite the green tea element to look like it did originally: 


docsv^ t mattev'. 

|v(oy/, its yrttY\, fectausc 
^rccy\*bca v-ulc dories 

last m -f ile- 


Now, it’s blue, because 
■the v-aspbc\rv-y \rulc d-omes 

last m the CSS -file. 


<p class= n greentea M > 


Save and reload. What color is the Green Tea Cooler paragraph now? 


0^) < ? > 

、 element OY^ Wcmy 


OjVggh 


•to or\t tlass, so >/C use 
WOS 七 

Y/WitV) is 州 cc 士 a. 
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HTMLcross Solution 
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Your CSS language lessons are coming along nicely. You already 


have the basics of CSS down, and you know how to create CSS rules to select and specify 


the style of an element. Now it’s time to build your vocabulary, and that means picking up 


some new properties and learning what they can do for you. In this chapter we’re going 
to work through some of the most common properties that affect the display of text. To do 
that, you’ll need to learn a few things about fonts and color. You’re going to see you don’t 
have to be stuck with the fonts everyone else uses, or the clunky sizes and styles the 
browser uses as the defaults for paragraphs and headings. You’re also going to see there 
is a lot more to color than meets the eye. 


this is a new chapter 
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common text properties 


Text awd fonts from $0,000 feet 

A lot of CSS properties are dedicated to helping you style your text. Using 
CSS, you can control font, style, color, and even the decorations that are put 
on your text, and we’re going to cover all these in this chapter. We’ll start by 
exploring the actual fonts that are used to display your pages. You’ve already 
seen the font-family property, and in this chapter you’re going to learn a 
lot more about specifying fonts. 

Before we dive in, let’s get the 30,000-foot view of some properties you can 
use to specify and change the look of your fonts. After that, we’ll take the 
fonts one by one and learn the ins and outs of using each. 


A ^dai e 

々 /a/ 




B lack 

c on\i c 


Co 




^ons 

Geoi， gia 

ebu ^et Ms 

V ^a na 


Customize the fonts in your pages with the font-family property. 


Fonts can have a dramatic effect on your page designs. In CSS, fonts are 
divided into “font families” from which you can specify the fonts you’d 
like used in each element of your page. Only certain fonts are commonly 
installed on most computers, so you need to be careful in your font 
choices. In this chapter we’ll take you through everything you need to 
know to specify and make the best use of fonts. 




y/cll sec a bii 
how you cav\ ihc -Po^ts 

available bo youir b\ro>wscv-. 


body { 

font-family: Verdana, Geneva , Arial, sans-serif; 


Control the size of your fonts with the font-size property. 

Font size also has a big impact on the design and the readability of your 
web pages. There are several ways to specify font sizes with CSS, and in 
this chapter we’ll cover each one, but we’ll also teach you how to specify 
your fonts in a way that allows your users to increase the font size without 
affecting your designs. 


body { 


font-size : 14px; 
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Add color to your text with the color property. 

You can change your text color with the color property. To do that, it 
helps to know a little about web colors, and we’ll take you through all the 
ins and outs of color, including the mysterious color “hex codes.” 


body { 

color : silver; 


Aqua 

囲 


Black Blue 


Navy Olive Purple 


Fuchsia 


Gray Green Lime Maroon 

■ ■ □ □ 


― 


Silver Teal White Yellow 


Affect the weight of your fonts with the font-weight property. 

Why settle for boring, average fonts when you can give them some extra 
weight when needed? Or are your fonts looking too heavy? Slim them down 
to a normal weight. All this is easily done with the font-weight property. 

body { 

font-weight : bold; 


lighter 

normal 

bold 

bolder 


Add even more style to your text with the text-decoration property. 

Using the text-decoration property, you can decorate your text with 
decorations including overlines, underlines, and line-throughs. 


body { 

text-decoration : underline; 


none 

underline 

overline 

line-through 
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overview of font families 


What is a fowt family awyway? 

You’ve already come across the font-family property, and so far you’ve 
always specified a value of “sans-serif”. You can get a lot more creative than 
that with the font-family property, but it helps to know what a font family 
is first. Here’s a quick rundown … 


Each font-family contains a set of fonts 
that share common characteristics. There 
are five font families: sans-serif, serif, 
monospace, cursive, and fantasy. Each 
family includes a large set of fonts, so on 
this page you’ll see only a few examples 
of each. 


Saws - serif family 

Verdana Aria I Black 


-i-f -family 
A lot ok 




scv'i-fs. A \oi o( pcoflc asso 匕 ia 七 e 如 look 


Trebuchet MS 

Geneva 



Serif family 


Scv-i-fs av-c 
dcdo\ra*tivc bav-bs 
hooks Oh "the 
tY\ds o-f lc*t*tc\rs. 



Arial 



The sans—sev-i-f -family mdudes 
v/U scv-i-fs. Tiicsc Wb ave 
usually £.or\sidcv-cd w'ovc readable or\ 

tompiA*tcv* screens *t^a^ 灼 * bs. 


Sa^s-^c\ri* 


*i-r n\tBv\s 
w y/i 七 hou 七 sc\ri-fs. w 


Fonts aren’t consistently available from one computer 
to another. In fact, the set of available fonts will vary 
depending on the operating system as well as what 
fonts and applications a user has installed. So keep in 
mind that the fonts on your machine may differ from 
what is available to your users. And, as we said, we’ll 
show you how to extend the set of fonts in a bit … 
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Monospace family 

Courier 

Courier New 

Andale Mono 


The rwo^ospadc -family is mddie up o( that hdve dohs-ta^-t— 

v/idth Aavadteirs. po\r -the hoviiohtal spade w i w 

takes up will be the sarwc width 七 hat a〆 V’ takes up. These 
•fohts a\rc pvimavily used to show so^tv/avc Code e^amf>les. 


Take a good look at the font families: serif 
fonts have an elegant, traditional look, 
while sans-serif fonts have a very clean and 
readable look. Monospace fonts feel like 
they were typed on a typewriter. Cursive and 
fantasy fonts have a playful or stylized feel. 


Tiic tuvsivc -family 
mdudes -for\*ts 七 ha 七 

look ha 灼 cUvittVoull 

sometimes see i\\tst *for\*ts 
used m iicddmy* 

Cursive family 
Comic Sans 

CfiuviccTy 



Fantasy family 

LAST HIHJA styli«d deL*-alive^jls C0 ^ mS 


Impact 
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develop your sense of fonts 



Font Magnets 

Your job is to help the fictional fonts below find their way home 
to their own font family. Move each fridge magnet on the left 
into the correct font family on the right. Check your answers 
before you move on. Review the font family descriptions on the 
previous pages if you need to. 



Monospace family 


Fantasy family 


Cursive family 


Sans-serif family 


Serif family 
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Specifying font families using CSS 


Okay, so there are a lot of good fonts out there from several font families. How do you 
get them in your pages? Well, you’ve already had a peek at the font-family property 
in the last chapter, when you specified a font-family of “sans-serif” for the lounge. 
Here’s a more interesting example: 


body { 


Usually, youv family spcdi-fidaiion do^-tains a 

list o( al*tcv-ir»a*tivc "foirrts, all -fvom same -family- 


font-family : 



V® u ^ spedi-fy move 
•forrt usihj tKc family 
pv-opc\rty. Jusi type ( 0 Y\i 
sepavated by domras. 


Verdana r Geneva r 



Wvi 七 C -font irtdmes dS 
av-c spelled，ihdludmg uppev- 
andl lowcvdasc Icttcvs. 


Arial, sans-serif; 


Alv/ays a jc^cv'id. Wb 七七 he 

like w sd, w sa 泊一 se w tuvsWc ，， ; ov 

w wo^ospatc w . You’ll sec 4a 七七 Wis does … a set. 


How fowt-family specifications work 

Here’s how the browser interprets the fonts listed in your font-family specification: 


CV^ctk -to see »-f -font 
Uev-ddnd is available on i\\t 

usev’s C.om^u'bcv' 3 灼 d if so, 

use it as tKc -foir>t -fov 七 Wis 
七（ •… "tV»C 

<bodY> element). 

body { 


l-f Vcvdana 
available ； tKcn look 
-fov 七 lie -font geneva, 
i-f it is available ； 
use i 七 -fov 七 lie body. 



l-f ^cv\cva isv\ ’七 
available ； 七 li ⑶ look -fov- 
七 he -forvt /Wial, i*f 
it is available, use ii 
-fov- 七 lie body. 


Pmally, i*f Y\ov\t o-f *tKc s^edi-f id 
■Poirts be *Pouhd, jus"t use 
>wli3"tcvc\r *tlic bvowsev dohsidcv'S 
i*ts default W s3hs—scvi-f W 七 . 


r\r\r\ 


font-family : Verdana r Geneva r Arial, sans-serif; 


y ou do^i V^avc -to speti^y W altcvnativc ^ts ； you 

L da^v V^avc tv/o, iWcc, ctt. 1^ last v/c 0J7 

used o^c-tKc default sa^s-scvi-f >wc 

(W 七 … omm ⑼ dl 侪 at because it dot^i jive you 
rwuA 6oyvtv-ol ovcv- i\\t -foyvts you d like used. 


The font-family property gives you a way to create a list of preferred fonts. 
Hopefully, most browsers will have one of your first choices, but if not, you can at least 
be assured that the browser will provide a generic font from the same family. 

Let’s get some fonts into your pages … 
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improving tony } s journal 


Pustiwg off Towy's journal 

Now that you know how to specify fonts, let’s take 
another look at Tony’s Segway’n USA page and 
give it a different look. We’ll be making some small, 
incremental changes to the text styles in Tony’s 
page, and while no single change is going to look 
dramatically different, by the end of the chapter 
we think you’ll agree the site has a slick new look. 
Let’s get an idea of where we might make some 
improvements and then let’s give Tony a new 
font-family. 


叫 styles *to site, so Wis site 

is d scv'»*f Wb ^ 

•tViC cr\*t'iv-c pay. 


dc-faul-t si^c fonts 

is also pvc*t*ty lav-^c a^d doesm i make 

a 灼 atbra^twe pay- 

The ^uo*tc is just I*t 

would be *to irwfv-ovc i'ts look 

a bit by addm^ some ^cm 七 - yby le. 


(ov 七 he pho-tos, this pay 

is va-thev ^ohodlivoirwa-tic., so y/cll 

also add some *fo»rt to\oY *to 

— ― 

it a little rwov-c m-tevestmj. 
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fretting Towya wcw fowt - family 

Let’s get Tony set up with a font-family. We’re going to start with 
some clean sans-serif fonts. First, create a new file, “journal.css” in the 
“chapter8/journal” folder and add this rule: 


body { 

font-family : Verdana, Geneva, Arial, sans-serif; 


sc-tiihj -tKc 

piropc^'ty - 
ok» -tKc <body> clcmchi 

ih "tKc <body> 
v/ill ihKcvi-t iKcsc -foh-ts. 


A 



You’ll \/c\rdaK»a 
ok> mos-t PGs … 



dKosen a set o-f 
sans-sev-i-f -fohts Kcv-c. 



… ahd geneva on 
most Mads. 


Avial is 
C.ommov» 
。灼 bo 七 Vv 


i-f all else 
•fails, wc Kavc 
七 lie default 
sans-sevi-f. 


Now you need to link Tony’s journal to the new stylesheet file. To do that, open the 
file “journal.html” in the “chapter8/journal” folder. Add the <link> element to 
link in the style in “journal.css”，like we did below. 


jouv-yvaUiml -file bo be oWitial HTML 1 ?, 

addrnj m i\\t dodtype a^d i^c <mcta> taj 


<!doctype html> 
<html> 


<head> 

<meta charset="utf-8 n > 


<link type="text/css n rel= n stylesheet” href= n journal.css"> 
<title>My Trip Around the USA on a Segway</title> 

</head> 




Hcvcs >NCVC 


<body> 




</body> 

</html> 


After you’ve made this change, save the file, fire up your browser, and load the page. 
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some font questions 


Test drivmg Towy's new fonts 

Open the page with the new CSS in the browser and you 
should see we’ve now got a nice set of sans-serif fonts. 
Let’s check out the changes … 


TKc *fo 灼七 dc-f'm'rtcly gives Tov\ys web a now 
look. TKc ^o>w Kave a dlcancv look y/rtliou 七 

七 he scvi*fs on 七 he Ic 七七 evs, al 七 iiou# 七 hey s-till look a 
tad lavjc or\ 七 he page- 


TKc pavagvapii is also 
dean a^di vevy readable- 


Because -foyvt-familY is mKcvitcd ^opcvtY ， 

all clc^cyvts ov» tKc avc ^ usmj a 
say>s—sevi-f -foyvt ； CVC>r\ list demC>r\*ts … 


...a^di 七 he <blodk«^uo*tc>s. 


f[y\d i-f ihc sev-i-f -fohts weve move youv* 
^ U F °*f tea, dor!{, lei us stop you. You tay\ 
always vedo ilic -foht—family dedbvaiioh 
b> use sev-i-f -fohts. 


thereiare no o 

Dumb Questions 


How do I specify a font 
with multiple words in the 
name, like Courier New? 

Just put quotes around 
the name in your font-family 
declaration, like this: 

font-family: "Courier 
New", Courier; 



So the font-family 
property is really a set of 
alternative fonts? 

Yes. It’s basically a priority 
list of fonts. The first is the font 
you’d like used, followed by a 
good substitute, followed by 
more substitutes, and so on. For 
the last font, you should specify 
the catch-all generic “sans-serif 
or “serif, which should be in the 
same family as all the fonts in 
your list. 


Are “serif” and 
“sans-serif” real fonts? 

<l serif and "sans-serif are 
not the names of actual fonts. 
However, your browser will 
substitute a real font in place of 
“serif or “sans-serif” if the other 
fonts before it in the font-family 
declaration can’t be found. 

The font used in its place will 
be whatever the browser has 
defined as the default font in 
that family. 


How do I know which to 
use? Serif or sans-serif? 

There are no rules. 
However, on a computer display, 
many people consider sans-serif 
the best for body text. You’ll find 
plenty of designs that use serif 
for body text, or mix serif fonts 
with sans-serif fonts. So, it really 
is up to you and what kind of 
look you want your page to have. 
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How do I deal with Gvcryowc having 
different fowts? 


The unfortunate thing about fonts is that you 
can’t control what fonts are installed on your 
users 5 computers. Not only that, but they tend 
to differ across operating systems — what might 
be on your Mac may not be on your user’s PC. 

So, how do you deal with that? Well, the tried- 
and-true strategy is to create a list of fonts that 
are most appropriate for your pages and then 
hope the user has one of those fonts installed. 

If he doesn’t, well, at least we can count on the 
browser to supply a generic font in the same 
font family. 

Let’s look at how to do that in a little more 
detail. What you need to do is ensure that your 
font-family declaration includes fonts that 
are likely to occur on both Windows and the 
Mac (as well as any other platforms your users 
might be using, like Linux or perhaps mobile 
devices), and that it also ends with a font family. 

Here’s an example: 


TKcsc 

Andale Mono 

Arial 

Arial Black 

Comic Sans 

avc likely bo 

Courier New 

be available on 

bo 七 W'\Y\do^iS 

Georgia 

Mad'm*tosK 

Impact 

domPu*tcv-s. 

TKcsc -fonts 

Times New Roman 

Trebuchet MS 

Verdana 

Geneva 

most likely *(x> be 

Courier 

•found orv Madm*tosii 

domputev-s. 

Helvetica 


Times 


Let's take a look at 
ouv dc-f -fov- Tor^ s 

pays ay …… 


(I) iVcd like -fov 


bo be 

七 " • 



(3) "That’s okay, because y/e 
匕如 pvobably douh*t ov\ /\v*ial 
b> be or\ citlicv l/Vihdov/s ov- 
/Vlads, bu*t i-f its hot.. 




font-family : Verdana, Geneva, Arial, 

(Z) |*f I 七 , S not, $ ⑶ eva would 
be hte, bu 七七 Wis Will ^v-obably 
ovtly or\ Mats. But i-f 

••七 ’s no 七 … 


sans-serif 


\ , 

( 午 ） TKch tKats s-till 


okay; well just lei tKc 
bv-owsev dKoose a sa^s- 
sev-i-f -foh-t -fov us. 
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I get how we need to make sure we 
specify fonts that will be appropriate all 
across all my users* machines, but I was 
really hoping we could use this cool Emblema 
One font I found for my main heading. Can I 
just use that, and if the users don’t have it 
they can use a fallback? 


Yes, but there’s a better way... 

Your suggestion would work, but most likely for only 
a very small percentage of your users. If you just 
have to have that oh-so-cool font, or typography is 
important to your site design, you can actually deliver 
a font right to your user’s browser using Web Fonts. 


To do this, you’re going to use a newer feature of 
CSS: the @font-f ace rule. This rule allows you to 
define the name and location of a font that can then 
be used in your page. 


Let’s see how this works … 
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How Web Fowts work 

With Web Fonts you can take advantage of a new capability of modern browsers that allows 
you to deliver new fonts directly to your users. Once the font is delivered, the browser can 
then make use of the Web Font just like it can any other font, and you can even style your 
text with CSS. Let’s look at how Web Fonts work in a little more detail: 


TV Wt Ale 6o^*ta'ms 
叫七 a Woy/scv 
yvccds use W 
•m yovAV v/cb pay. 


Hcvcs 70UV sevvev. 


a *fo 灼七 -f ile you vc 
sbortd oy\ youv sewev. 





9 S 


t=3 


Jiljklmri 
opc^stuV ■ 
wxyzABCDM 

EFGHU^I 



\ 


www.starbuzzcoffee.com 


Notice uses 

3 w .y/o^-f W -file t%itY\s\ov\, 
y^i\\\CM mcar^s y/cb ofC” 



0( douv-sc youv- scv-vcv- s-fcoves all 
youv- HTML a^d CSS -too, but 
v/cVc y\o{, -tha-t hc\rc- 


o To make use of Web Fonts, the browser first retrieves an 
HTML page that references them. 



''Here ya go" index.htmi 
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getting started with web fonts 


❺ The browser then retrieves the Web Font files needed for 
the page. 




o Now, with the font retrieved, the browser uses the font 
when it displays the page. 



tJiereicire no ^ 

Dumb Questi9ns 


What’s the woff, or web open font 
format? 

Woff is emerging as the standard 
font format for Web Fonts, and you’ll see it 
supported today across all modern browsers. 
That said, there has previously been some 
lack of standardization in this area, with 
different browsers supporting different font 
formats. If you need to provide Web Fonts 
to browsers that may not support woff, you’ll 
need to supply one or more of a few formats 
that are available as alternatives. Web Font 
hosting services can help a lot here. 


So to use a Web Font, I have to 
host the font files on a server? 

If you’re just testing fonts you can 
actually store and refer to them as local files 
on your own file system (just like you do with, 
say, an image). But if you want to deliver 
fonts to your users on the Web, you either 
have to host the files yourself on a server, 
or make use of a hosting service, such as 
Google's, which is free. 


If I use a Web Font, can I then 
count on it being there for my users? 

As long as they have a modern 
browser (and discounting any network 
connectivity or server issues), for the most 
part, yes. However, if they are using old 
browsers or mobile devices that don’t yet 
support Web Fonts, all bets are off and you 
still need to supply font alternatives (we’ll 
see how in a sec). 
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styling with fonts and colors 


How to add a Web Fowt to your page... 

So you’ve got a special font you want to add to your page? Let’s step through how to do that using 
Web Fonts and the @ font-face rule in CSS. 

Step owe: Find a font 

If you don’t have a font, like Tony does, you’ll want to visit the many sites out there that have both 
free and licensed fonts you can use in your pages (check out the appendix for more information). 
We’re going to use Tony’s suggestion, Emblema One, which is a free font. 


Step two: Make sure you have all the formats of the font you need 

Here’s the good news on Web Fonts: the @font-face CSS rule is pretty much a standard across 
modern browsers. Here’s the bad news: the actual format used to store the fonts isn’t quite yet a 
standard (although we’re getting there), and in fact there are several different formats (at the time 
of writing) supported across the browsers to varying degrees. Here are the common formats (and 
their respective file extensions): 

^ - TvucTypc ay\d closely v-daied ； 

一 广 is buili ot\ *top T\rucType (a 灼 d is 

TvueType). 

OpenType fonts: .otf 

Embedded ype (BOT) is a dompadi form of y^c. 

Embedded OpenType fonts: .eot 的 (摩⑽似 ^ su P? o^d cly o, |E- 


TrueType fonts: .ttf 


SVG fonts: .svg 


Web open font format: .woff 


Scalable Vcdtov- o\r is a gcr\cval-puvposc gv-afliids 

•foirm 此 arvd -fohts use *tliis *fo\rma 七七 © vc|>vcscr\*t thav-ad*tcv-s. 

4^^^ w<cb of>eK\ 七 -fovmat is based on TvucType, is bc'mj developed as a 

stShdav-d -fov iVcb Fonts. It’s y/cll sup^ovtcd or\ most modem bvowsevs. 


The best supported format across most modern browsers is web open font format, so that’s 
the one we recommend you use. You can offer an alternative for older browsers; we’ll use 
TrueType as that’s well supported across all browsers too (except IE). 


Step three: Place your font files on the Web 

You’ll want to place your font files on the Web, so they are accessible to your user’s browsers. Or 
you can use one of the many font services coming online that will host these files for you. In 
either case, you’ll need the URL of your font files. Here are Tony’s files, which we’ve placed on 
wickedlysmart.com: 

http : //wickedlysmart.com/hfhtmlcs s/chapter8/j ournal/EmblemaOne-Regular.woff 
http : //wickedlysmart.com/hfhtmlcss/chapter8/j ournal/EmblemaOne-Regular.ttf 
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Step 4: Add the ©font-face property to your CSS 


You’ve got the URLs for the .woff and .ttf versions of the font named “Emblema One，’’ so now 
you’re ready to add a @font-f ace rule to your “journal.css” file. Add the rule to the top of the 
file, above the body rule: 


s-tavi tlic vulc 
v/i 七 li fade. 


dssi< 

dss'u 


a 心一 ‘ 如七 selects a set <A 气-吵 卜 

i^s style, ^rulc sets ^ a Wt, »s 

广 a ,^td to a W^am.lv name U laW use. 

C 广 I，tKe .e a U ^ 

@ font-face { ^ ^ ^ uSC a ^Y ^ amC V ou b ^ 1 b ^ ^ ^ 

P r l ，一 n Y 

font-family: "Emblema One"; 


Lvt ^ame, like w Emblcma O^t 


sre : url("http : //wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), 
url("http : //wickedlysmart.com/hfhtmlc s s / chapter8 / j ournal/EmblemaOne-Regular.ttf"); 

The s\rd p\rofc\rty tells the b\rowsc\r wlic\rc bo get 七 lie -forvi- l/Vc y\ttd 
"to a svd vdlue -Pov* cvcvy -Pile 七 lie bvowsev* rwi# 七 vedo^rviz^. 

In ou\r tast, wcVc go'mj *to suffly both 七 he woff arvdl *btf types 
v-cdojniz^di by -today s b\roy/scv-s. 



The @font-face rule tells the browser to load the font files at the sre URLs. Browsers will 
attempt to load each sre file until it finds one that it can support. Once loaded, the font is 
assigned the name you specify in the font-family property — in this case, “EmblemaOne.” 

Now let’s take that font and see how we can use it in the style of the page. 

H'mt you alvcady kv»o>w 

Step five: Use the font-family name w your CSS Kov/ *to do 七 Wis! 


Once you’ve loaded a font into the browser with the @ font-face rule, you can use the font 
by referencing the name you gave it with the font-family property. Let’s change the font 
of the <hl> heading in Tony’s page to use the “Emblema One” font. To do that, we’ll add 
a rule for <hl> like this:: 

iVe ^amc <A -fo^t just like 

^ovmal, o^Iy tW.s time, .Vs a U 七从’化 

font-family: "Emblema One n , sans-serif; ac» i \ uS t ^ 

sowvcttmj joes v/v-onj, v/C sa^s-scvi-f 

as a -fallback- 




Step six: Load the page! 

That’s it! You’re ready to test your font. Reload Tony’s journal page and check out the next 
page to see what we got... 
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Test drive the Web Fowt iw 
Towy's journal 吞 


When you reload “journal.html”，you should see the 
<hl> heading at the top of the page use the Emblema 
One. Not bad for just a few lines of CSS! 


Koy/, Kcad'mj at 

Jc Ton^s jou\nr\al fSJC ,s 
-font OirvC- 



TTF and WOFF 
font formats 
don't work in IE8 
and earlier. 

If you want to 


support users with older IE browsers, 
y 0 u , ll need to do a bit more work with 
Web Fonts, and use an EOT font. 




0 mc:"/ ch< 



e no o 

Questi9ns 


The @font-face rule doesn’t really 
look or act like a CSS rule, does it? 

A. 

You’re right; think of @font-face as 
a built-in CSS rule rather than a rule that 
acts like a selector. Instead of selecting an 
element, @font-face allows you to retrieve 
a Web Font, and assign it to a font-family 
name. The @ at the beginning is a good clue 
this isn’t an ordinary CSS rule. 

Q/ Are there other built-in CSS rules I 
should know about? 

There are. Two common built-in rules 
you’ll see are @import, which allows you to 
import other CSS files (rather than a <link> 
in your HTML), and @media, which allows 
you to create CSS rules that are specific to 
certain “media” types, like a printed page 
versus a desktop screen versus a mobile 
phone. More on @media later. 


Web fonts seem great; are there 
any disadvantages to using them? 

A. 

A few. First, it takes time to retrieve 
Web Fonts, and so your page performance 
might suffer the first time you have to 
retrieve them. Also, there's the pain of 
managing the multiple font files. Finally, you 
may find mobile and small devices that don’t 
support them, so make sure you always 
allow for alternatives in your design. 

Can I use multiple custom fonts 
with @font-face? 

Yes. If you’re using @font-face to load 
the fonts, then for each font you want to use, 
make sure the font files are available on your 
server, and create a separate @font-face 
rule for each one, so you can give each a 
unique name. 

灼 move ow IA/icb Poirrbs, 
ou 七七 he 


However, remember to make sure you only 
choose the fonts you really need in your web 
page; each extra font takes extra loading 
time for your page, so having multiple Web 
Fonts in your page will slow down your web 
page. If it gets too slow, you might have 
frustrated users on your hands! 

You mentioned services to help 
me with hosting Web Fonts. Can you say 
more? 

Sure! FontSquirrel (http://www. 
fontsquirrel.com/) is a great place to find 
open source, free fonts that you can upload 
to your server. Their font kits make it easy to 
offer multiple formats of a given font. Google 
Web Font Service (http://www.google.com/ 
webfonts) is a way you can let Google do all 
the hard work for managing the fonts and the 
CSS for you; in this case, you just link to the 
fonts you want on the Google service, and 
then use the names in your CSS. Easy! 
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how to specify font sizes 


Adjusting font sizes 


Now that Tony has a new set of fonts, we need to work on those font sizes, as most 
people find the default sizes of the headings a bit large, at least aesthetically. To do 
that, you need to know how to specify font sizes, and there are actually a few ways 
to do this. Let’s take a look at some ways to specify font-size, and then we’ll talk 
about how best to specify font size so they are consistent and user friendly. 


you do 七 Wmy 
uscv* Will be 3 blc "to 

心州七 S'»z«s oy \ you\r >wcb 

see V^ov/ m d double <A fays 


You can specify your font size in pixels, just like the pixel dimensions you used 
for images in Chapter 5. When you specify font size in pixels, you’re telling 
the browser how many pixels tall the letters should be. 


pc 


font-size : 14px; 

Uc must dome ^ 

?l% cls. Vou tar^i V^avc a syatt m brUew 


ttev-^s \\o^i you d 

七一 Vi*bWm 3 body v*ulc’ 


k you ^ 

a 外 umbev" "followed by 、乂 . 

This says ttat ttc 
should be I 午卜 els W15K. 



row 


body { 



h| i pj^?'^ ls 


font-size : 14px; 


Setting a -font *to W pixels Kijii 
means -tKat there will be I 午 
pixels between 七 he lowest pa\rt o( 
七 lie Ic 七七 evs and 七 he Kiglics-t. 






% 


Unlike pixels, which tell the font exactly how big it should be in pixels, a font size specified 
as a percentage tells the font how big it should be relative to another font size. So, 


font-size : 150%; 


Hcv-c y/c^vc sped'^iedi a body -font siz^ in 
pixels, and a level - one Keadin^ as 1 ^ 0 %. 


says that the font size should be 150% 
of another font size. But which other 
font size? Well, since font-size is 
a property that is inherited from the 
parent element, when you specify a 
percentage font size, it is relative to 
the parent element. Let’s check out 
how that works … 


body { 

font-size : 14px; 

} 

hi { 

font-size : 150%; 
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styling with fonts and colors 


You can also specify font sizes using em, which, like percentage, is another 
relative unit of measure. With em, you don’t specify a percentage; instead, 
you specity a scaling tactor. Here's how you use em: m'»% 七 Wis 

_ , . I I L up Wi*bV\ 

<L> 如 W 

font-size: 1.2em; Wrt s 奴 should be 

staled ky I ^ 

Say you use this measurement to specify the size of an 
<h2> heading. Your <h2> headings will be 1.2 times the 
font size of the parent element, which in this case is 1.2 
times 14px, which is about 17px. 



body { 
} 

hi { 

} 

h2 { 


font-size : 14px; 


font-size : 


font-size : 
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using keywords for size 


keywords 


There’s one more way to specify font sizes: keywords. You 
can specify a font size as xx-small, x-small, small, 
medium, large, x-large, or xx-large and the browser 
will translate these keywords into pixel values using defaults 
that are defined in the browser. 


This is -typidally Kow -tKc vav-ious keyword si«s v-cla*tc h> 
one air\o*tKcv-. EadK siz^ is about 2 . 0 % lavgev- 七 1^ 灼 -tKc 
previous s\z^, airvd small is usually dc-fmcd b> be avotrnd 
12 - pixels in KcijK-t- Keep in mmd ， Koy/cvcv, 七 ha 七 
keywords aren’t always dc-fmcd 七 lie same way m cvcv-y 
bvowsev-, and 七 ha 七 users data v-cdc-fmc *tKcm iJP 七 hey want 


body { 


font-size : small 


^ birowscirs ; -this will v-csult ih the 
body ic^i b〜 3 about IZ pixels. 


xx-small 


x-small 


small 


medium 

large 

x-large 

xx-large 


So, how should I specify my font sizes? 

You’ve got quite a few choices for specifying font sizes: px, em, percentages, and 
keywords. So, which do you use? Here’s a recipe for specifying font sizes that 
will give you consistent results for most browsers. 

o Choose a keyword (we recommend small or medium) and specify it as the 
font size in your body rule. This acts as the default size for your page. 

o Specify the font sizes of your other elements relative to your body font size 
using either em or percentages (the choice between em and percentages 
is yours, as they are essentially two ways to do the same thing). 


Nice recipe, but what’s good about it? By defining your fonts relative to the 
body font size, it’s really easy to change the font sizes in your web page simply 
by changing the body font size. Want to redesign the page to make the fonts 
larger? If your body font size value is small, simply change it to medium, and 
voila — every other element will automatically get larger in proportion because 
you specified their font sizes relative to the body’s font size. Better yet, say your 
users want to resize the fonts on the page. Again, no problem; using this recipe, 
all the fonts on the page will automatically readjust. 
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Let’s look at how this all works. First, you set a size for your 
<body> element. Then, you set all the other font sizes relative to 
that size, like this: 

body { font-size : small; } 
hi { font-size : 150% ; } 
h2 { font-size : 120% ; } 


That gives you a document tree that looks like this: 

The *for \ 七 siic of <hl> 
is I 弓 0% 七 he -fowt siz^ 
o( <body>. 




Wic’vc sc 七 <V^2-> s 
s'»zjC *to 12-0 /o 
of I-U s\z£. 


f 


hi is 150% of body h2 is 120% of body 

TKc <p> docs / 七 Kave a -fon-t-siz^ value sc*t> so 
by de-fault ； rt miicvi-ts 七 he <body> "fern 七 siz-c. 


Now let’s say you want to increase the size of the fonts on the page, 
or perhaps the user does. Then you get a tree that looks like this: 


. 

B Older versions of 

Internet Explorer 
, ▼ V do NOT support 

Watcli it! text scahn 9 

when you specify 
the font size using pixels. 

: Unfortunately, users of older : 

: versions of Internet Explorer cannot : 
: res i ze fonts if your font sizes are | 
i specified using pixels. So, thafs : 
j one reason to stay away from pixel ： 

: sizes. If you use pixels, you，ll be : 

: reducing the accessibility of your :: 

: pages for some of your users, : 

: ^though hopefully not for too ： ： 

；* muc h longer as users continue to : 

: upgrade their browsers. ： 

: Fortunately, if you follow the : 

: recipe of supplying a keyword to ： 

: define your body’s font size, and : 

: use relative sizes for your other :: 

: elements using em or %, then IE •: 

: will properly scale your fonts if the \ 

browser is asked to make the text '： 
bigger or smaller. : 


(v/ov/ lets say you dtt\dt bo make youv- y" 一 N 
siz< biggev, OR iKc usev- makes iiic ^ 

siz< biggev- us'mj iKc bvov/sev 

All you\r o-tKcv dcnf»Ch*b 
au*toma*tidally get biggev- b>o, 
without you having io do a 七 hmg. V 


\ 0 . -,s st.ll IZO% tv>c s-,« 0 -f 

tv>c Wv Ui Ir. tw»s 
vt，s IZO% w —. 



Now the body font size has changed to large, and everything else has 
changed too, in relation to the body font size. That’s great, because 
you didn’t have to go through and change all your other font sizes; 
all you had to do was change the body font size. And if you’re a user, 
everything happened behind the scenes. When you increased the text 
size, all the text got bigger because all the elements are sized relative to 
one another, so the page still looks good at a larger font size. 
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Let's make these changes to the 
font sizes m Towy's web page 

It’s time to try these font sizes in Tony’s web page. Add the new properties to the 
“journal.css” file in the “chapter8/journal” folder. Once you’ve made the changes, 
reload the page in the browser and check out the differences in the font size. If you 
don’t see a difference, check your CSS carefully for errors. 


@font-face { 

font-family : "Emblema One"; 

sre : url("http : //wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne- 
Regular.woff"), 

url("http :// wickedlysmart.com/hfhtmlcs s / chapter8 / j ournal / EmblemaOne - 
Regular.ttf"); 


body { 

font-family : Verdana, Geneva, Arial , sans-serif; 
font-size : small; _Following ouv vedipe, y/cVc usmg a sizje 

} 

hi { 


o( smdll -fov 七 he <body> eleme 的七 . TKis will 
as tKc base -font siic. 


font-family: "Emblema One 
font-size : 220% ; 


sans-serif 



/W y/c II set otKcv Lts relative to i\\t 
body "(Wt sizjc. |y\ dase II tvy a 

W S.2.C is ZZO% base si«. 


WII n，akc tKc <KZ> siz^ 
swllcir <hl>, oY' \lO% of 
"Bie body (。竹七 siz_c. 


^harpen your pencil 


If you specified <h1 > and <h2>’s font sizes using em rather than 
percentage, what would their values be? 


•LUdri 〈乙 ij> puo ludi'isq pjnoM < / 1 /> : jdMSuy 


332 Chapter 8 











styling with fonts and colors 


Test drivmg the fowt sizes 

Here’s the evolving journal，complete with new 
smaller fonts. Check out the differences... 


ttcvVs now vcv-siov\ with u^dd'kecl 
-fowts. 丁 lie design is s-tairt'mj *to look 
a little less dluwky/ 


« o o 


My Trip Around the USA on a Segway 


^v-evious 
version bc-forc 

m *fo 朽七 siz^s. 


^ file:///chapters/journal/journal.html 


C Google 


« o o 


My Trip Around the 


0file:///chapter8/journal/journal.htm 


Scffwui^n USA 

Documenting my trip around the US 

August 20, 2012 






Scywaii'n VSA 


Well I made it 1200 miles already, * 
interesting places on the way: 

1. Walla Walla, WA 

2. Magic City, ID 

3. Bountiful, UT 

4. Last Chance, CO 

5. Truth or Consequences, NM 

6. Why, AZ 

July 14, 2012 

I saw some Burma Shave style sign 

Passing cars, 

When you can't see, 

May get you, 

A glimpse, 

Of eternity. 


I definitely won't be passing any cars 


Documenting my trip around the US on my very own Segway! 

August 20, 2012 



Well I made it 1200 miles already, and I passed through some interesting 
places on the way: 

1. Walla Walla, WA 

2. Magic City, ID 

3. Bountiful, UT 

4. Last Chance, CO 

5. Truth or Consequences, NM 

6. Why, AZ 

July 14, 2012 

I saw some Burma Shave style signs on the side of the road today: 

Passing cars. 

When you can't see. 

May get you, 

A glimpse. 

Of eternity. 

I definitely won't be passing any cars. 

June 2 , 2012 



My first day of the trip! I can't believe I finally got everything packed and ready 
to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me: 

• cellphone 

• iPod 

• digital camera 

參 and a protein bar 


TVis <Kl> licad'mj looks 
mudK bc*t*tcv 的 o>M. IVs 

bijgcv *tKa^ iKc <K2-> 
bui dloesy/i 

ovcvv/Kclw* tKc body 七以七 

dy\d iKc m s\z^. 

T\)t body is 
a -tad smallcv-. 
dc-fauli body 七作七 
siz^ is usually 
I— %, aliiioujii ii 
does depend oy\ -tiic 
bvov/sev. But its 
still easily vcadablc 
a 七七 k w smaH w siz^, 
v/iiitii is pvobably 
about 12-^x.. 



Tiic <\\2> 
is d brt smdllcv *too ； 
and is a good siz^ 
tompav-cd {p 
<)nl> iicadi'mj- 
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more questions on font size 


tJiereiare no ^ 

Dumb Questi9ns 


So, by defining a font size in the 
<body> element, I’m somehow defining a 
default size for the page? How does that 
work? 

Yes, that’s right. By setting a font 
size in your <body> element, you can then 
define the other font sizes of your elements 
in relation to their parent. What’s so great 
about that? Well, if you need to change the 
font size, then all you need to do is change 
the body font size, and everything else will 
change in proportion. 

Do we really need to worry about 
users resizing their browser fonts? I 
never do that. 

Yes. Almost all browsers allow their 
users to make the text of a page bigger or 
smaller, and many users take advantage 
of this feature. If you define your fonts in a 
relative manner, then your users will have no 
trouble doing this. Just be careful not to use 
pixel sizes, because some browsers have 
problems resizing those. 

I like the idea of using pixels 
because then my page will look exactly 
like I specify it. 

There is some truth to that—by using 
pixels for every element's font size, you 
are choosing the precise font size you want 
for each element. But you do that at the 
cost of giving some of your users (the ones 
using older versions of Internet Explorer) 
the flexibility to pick a font size that is 
appropriate for their display and eyesight. 

You also are creating pages that are a 
little harder to maintain because if you 
suddenly want to increase the font sizes of 
all the elements in a page, you have a lot of 
changes to make. 


What’s the difference between em 
and %? They seem like the same thing. 

They are basically two different ways 
to achieve the same thing. Both give you a 
way to specify a size relative to the parent 
font size. A lot of people find percent easier 
to think about than em, and also easier 
to read in your CSS. But you should use 
whichever you want. 

If I don’t specify any font sizes, do I 
just get the default font sizes? 

Yes, and what those sizes are 
depends on your browser, and even the 
version of the browser you are running. But 
in most cases, the default body font size will 
be 16 pixels. 

And what are the default sizes for 
the headings? 

Again, it depends on the browser, but 
in general, <h1> is 200% of the default body 
text font size, <h2> is 150%, <h3> is 120%, 
<h4> is 100%, <h5> is 90%, and <h6> is 
60%. Notice that by default <h4> is the same 
font size as the body font size, and <h5> and 
<h6> are smaller. 

So rather than using the size 
keywords, can I use em or % in the body 
rule? If I use 90% for the font size of the 
body, what does that mean exactly? It’s 
90% of what? 

Yes, you can do that. If you specify 
a font size of 90% in your body rule, then 
that would be 90% of the default font size, 
which we just said is usually 16 pixels, so 
90% would be about 14 pixels. If you’d like a 
font size slightly different than the keywords 
provided, go ahead and use % or em. 


There seems to be so many 
differences between browsers: font- 
family, font-size, various default settings, 
and so on. How will I ever know if my 
design looks good on other browsers? 

Great question. The easy answer 
is that if you follow the guidelines in this 
chapter, then most of your designs are going 
to look just fine in other browsers. However, 
you should know that they may look slightly 
different in different browsers—the fonts may 
be slightly bigger or smaller, spacing here 
and there may be different, etc. But all the 
differences should be very minor and should 
not affect the readability of your pages. 

However, if you really care about having 
your pages looking almost identical in many 
browsers, then you really need to test them 
in lots of browsers. And to really take this 
to the extreme, you’ll find a variety of CSS 
“hacks” to try to make different browsers 
behave the same. If you want to take it this 
far, there’s nothing wrong with that, but just 
keep in mind a lot of these activities take 
time and have diminishing returns. 
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Changing a fowfs weight 

The font-weight property allows you to control how 
bold the text looks. As you know, bold text looks darker 
than normal text and tends to be a bit fatter too. You 
can make any element use bold text by setting the 
font-weight property to bold, like this: 

font-weight : bold; 

You can also go the other way. If you have an element 
that is set to bold by default, or is inheriting bold from a 
parent, then you can remove the bold style like this: 

font-weight : normal; 

There are also two relative font-weight properties: 
bolder and lighter. These will make your text 
style a little bolder or a little lighter relative to its 
inherited value. These values are seldom used and 
because not many fonts allow for slight differences in 
the amount of boldness, in practice these two values 
often have no effect. 

You can also set your font-weight property to a 
number between 100 and 900 (in multiples of 100), 
but again, this is not well supported across fonts and 
browsers and so is not often used. 


WbW 吵七 : ” 0 — 1 ， 



Starbuzz Coffee 
Beverages 


bold; 


Starbuzz Coffee 




Write the CSS to change the second-level headings in Tony’s page from their default 
bold value to normal weight. Then, add the rule to your CSS and give it a test drive. 
You’ll find the answer to this one on the next page. 
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using normal weight 


Test drive the wormal - weight headings 


Here’s what your CSS should look like after you make the change to 
use a normal font-weight for the <h2> headings: 


@font-face { 


Wire leaving oui -the -full 
dc-fihitioh -fco save some spade. 


t 


body { 

font-family : Verdana , Geneva , Arial , sans-serif; 
font-size : small; 


hi { 

font-family : "Emblema One ", 
font-size : 220% ; 

} 

h2 { 

font-size : 130%; 
font-weight: normal; 


Hcvc >wcVc *fo 灼七一 v/ei # 七 

o-f i\\t <\\2> Kcad'mjs -to ^ov-mal 



f\Y\d Kcvc av-c tKc vcsults. TKc <W1> 
hcadi 呼 av-c now 1 吵七 cv looking. 

You dan still tell tKcy avc headings 
bedause *tKcy avc IZO% -tKc si^c 
七 he body 七 


sans-serif; 
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Adding style to your fowts 

You’re familiar with italic text, right? Italic text 
is slanted, and sometimes has extra curly serifs. 

For example, compare these two styles: 

not italic ne vtaldW ,s slaved {p tKc r\(^i 

i 威 c ay.a Kas tuvls strAs. 


You can add an italic style to your text in 
CSS using the font-style property: 

font-style : italic; 


ton\n\Oi\ mis^tskc is *to 

u itali6 w as w itaks，’. 


|-f you do, you v/oy \’ 七 see 
'rtalid. So \rcw»cmbcv- 


-to youv spcllmj. 

However, not all fonts support the italic style, 
so what you get instead is called oblique text. 

Oblique text is also slanted text, but rather 
than using a specially designed slanted set of 
characters in the font, the browser just applies 
a slant to the normal letters. Compare these 
non-oblique and oblique styles: 


not oblique 
oblique 




TKc vcgulav- lettevs avc 
slanted *to tKc vigKt m 
七 lie oblique style. 


You can use the font-style property 
to get oblique text too, like this: 

font-style : oblique; 

In practice, you’re going to find that, depending 
on your choice of font and browser, sometimes 
the two styles will look identical, and sometimes 
they won’t. So, unless italic versus oblique is 
very important to you, choose one and move 
on. If it is important, you’ll need to test your 
font and browser combination for the best 
effect. 


Italic and otlicjue 
styles are two styles 
tkat give ionts a 
slantect appearance. 

Unless you can control 
tke ionts and browsers 
your visitors are 
using ， you’ll iinJi tkat 
sometimes you get italic 
and sometimes oUicjue ， 
no matter wkick style 
you specify. 

So just gfo witk italic 
and don’t worry about 
tke ctiHerences (you 
protatly can’t control 
tnem anyway). 
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Styling Towy's quotes 
with a little italic 

Now we’re going to use the font-style property 
to add a little pizzazz to Tony’s quotes. Remember 
the Burma Shave slogan in the <blockquote> 
element? We’re going to change the slogan to italic 
style to set it off from the rest of the text. To do 
that, we just need to style the <blockquote> with a 
font-style of italic, like this: 

blockquote { 

font-style : italic; 

} 

Add this new CSS rule to the CSS in your 
“journal.css” file, save it, and give the page a 
test drive. You should see the Burma Shave 
slogan change to italic; here’s our test drive. 



The text for the <blockquote> is actually inside 
a <p> that’s inside the <blockquote>. So, how did this 
change the paragraph to italic? 

Remember, by default most elements get their font 
styles from their parents, and the parent of this paragraph 
is the <blockquote> element. So the paragraph within the 
〈 blockquote〉inherits the italic style. 

Why didn’t we just put the text into an <em> 
element inside the <blockquote>? Wouldn’t that do the 
same thing and make the <blockquote> italic? 

Remember that <em> is for specifying structure. <em> 
says that a set of words should be emphasized. What we’re 
doing is styling a <blockquote>, we are not indicating that the 
text in the <blockquote> should be emphasized. So, while 
you’re right, on most browsers <em> is styled with italic, it’s 
not the right way to style the text in the 〈 blockquote〉. Also, 
keep in mind that the style of <em> could change, so you 
shouldn’t count on <em> always being italic. 



tteve’s 七 lie how style oy \ 七 lie Burma £Kavc 
slogan m Tov\ys page- Wc got slanted 七 c 此 
jus 七 like wc y/anted- 
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Cool. Love the new look. Hey, 
how about a little color in those 
fonts? Say, ummm...the color of 
my shirt? I love orange! 



You’d think we could just tell you there 
was a color property and send you on 
your way to use it. But unlike font sizes 
or weights or text styles, you’ve got to 
understand a fair bit about color to be able 
to work with it and specify it in CSS. 

So, over the next few pages, you’re going 
to dive into color and learn everything 
you need to know to use it on your pages: 
how colors on the screen work, the various 
ways of describing color in CSS, what 
those mysterious hex codes are all about, 
whether you should be worried about 
“web-safe colors,” and what’s the easiest 
way to find and specify colors. 


you are here ► 


339 



overview of web colors 


How do web colors work? 

You’re starting to see that there are lots of places you can add color to your 
pages: background colors, border colors, and soon, font colors as well. But 
how do colors on a computer actually work? Let’s take a look. 



Web colors are specified in terms of how much 
red, green, and blue make up the color. You 
specify the amount of each color from 0 to 
100% and then add them all together to arrive 
at a final color. For instance if you add 100% 
red, 100% green, and 100% blue together, you 
get white. Notice that on a computer screen, 
mixing together colors results in a lighter color. 
After all, this is light we’re mixing! 


tteve’s vcd> and blue bemj 

mi%ed -toytKcv. l-f you look a*t the 
you II see Kov/ iKcy all add up. 



But if you add, say, only 60% of each 
component (red, green, and blue), then what 
would you expect? Less white, right? In other 
words, you get a gray color, because we’re 
adding equal amounts of the three colors, but 
not as much light to the screen. 
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Or, say you mix together 80% red and 40% 
green. You’d expect an orange color, right? 
Well, that’s exactly what you’ll get. Notice that 
if a color is contributing zero, then it doesn’t 
affect the other two colors. Again, this is 
because there is no blue light being mixed with 
red and green. 


Mi 乂 m 3 0O7o v-cd 
午 0% V/C 3 

hide ova^gc dolov. 


0^\ a 七 ev stveen ； i-f 0% blue is added, 

blue docs^-t add *to tolov. 



And what if you mix 0% of red, green, and 
blue, then what do you get? That means you’re 
sending no light of any kind to the screen, so 
you get black. 
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Why do I need to know all 
this ''color theory"? Can’t I just 
specify my colors by name? Like 
'red / 1 ''green / 1 or ''blue"? Thafs 
what weve been doing so far. 


You certainly can use color 
names all you like, but CSS 
defines the names of only 
about 150 colors. 


While that may seem like a lot, that 
palette gets old pretty quickly and really 
limits the expressiveness of your pages. 
We’re going to show you how to specify 
colors in a way that will allow you to 
name a lot more than 150 colors; in fact, 
you’ll be able to work from a palette of 
sixteen million colors. 


Now, you’ve already seen a few examples 
of colors in HTML, and yes, they do 
look a little funky, like #fcl257. So, let’s 
first figure out how to specify colors and 
then you’ll see how you can easily use 
color charts, online color pickers, or your 
photo editing application to pick your 
colors. 
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How do I specify web colors? 
Let me count the ways... 


CSS gives you a few ways to specify colors. You can specify the 
name of a color, specify a color in terms of its relative percentages 
in red, green, and blue, or you can specify your color using a hex 
code, which is shorthand for describing the red, green, and blue 
components of the color. 

While you might think that the Web would have decided on one 
format by now, all these formats are commonly used, so it’s good 
to know about them all. However, hex codes are by far the most 
common way of specifying web colors. But remember that all 
these ways of specifying color ultimately just tell the browser the 
amount of red, green, and blue that goes into a color. 


Let’s work through each method of specifying colors in CSS. 


dan OY\ tKcsc l^> 

dolovs m any bvoAwscv, bu 七 
you ohly -f mdi 

l^O dolovs in 

bvoy/sevs. 



Aqua 



Black 



Blue Fuchsia 


Specify color by name 

The most straightforward way to describe a color in CSS is just to 
use its name. There are 16 basic colors and 150 extended colors 
that can be specified this way. Let’s say you want to specify the color 
“silver” as the background color of a body element; here’s how you 
write that in CSS: 


Gray Green 

Lime 


body 

广 、 

tteves ilic body v-ulc. 


background-color : 



f{r\d tKc badkgvouhd-dolov 


silver; 


-tVic dolov 



Navy Olive 



Purple Red 



Silver Teal 


So, to specify a color by name, just type the color name as the value - - 

of the property. CSS color names are case-insensitive, so you can 

type silver, Silver, or SILVER, and all will work. Here are the 16 White Yellow 

basic colors in CSS. Remember, these are just names for predefined 
amounts of red, green, and blue. v_ I 

Color m a book by W^i W” o« 如?十 w 

… a 仏个 W , 如吵七 k Mtd by tKe so ttese 

toWs W.II look sr.3^lY rn v/cb pays. 
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Specify color w red, green, and blue values 

You can also specify a color as the amount of red, green, and blue. So, 
say you wanted to specify the orange color we looked at a couple of 
pages back, which consisted of 80% red, 40% green, and 0% blue. 
Here’s how you do that: 


body { 

background-color : rgb(80%, 40% 

▲ 





80% Red 


0% Blue 






0 %) 



40% Green 



Bcjih y/i-tK sKov-t 
*fo\r \rcd, blue. 


( ,hd spc^i-fy i\\t (or 

Ytd, and blue VrtiVm pavc^cscs, 




You can also specify the red, green, and blue values as a numeric value 
between 0 and 255. So, instead of 80% red, 40% green, and 0% blue, 
you can use 204 red, 102 green, and 0 blue. 

Here’s how you use straight numeric values to specify your color: 


yVKeve did these numbev-s dome -fvom? 
00% o*f Z 鈣 is zo 午， 

午0 % o*f 旅 is 101, and 
0% o( is O. 


body { 

background-color : rgb(204, 102, 0); 

To ^umevid. values 

just -type m i\\t value 

ay\d do^*t use a %. 


% still s-ta\rt y/i"tK 




tJiereicire no ^ 

Dumb Questi 9 ns 


Why are there two different ways to specify rgb values? 
Don’t percentages seem more straightforward? 

Sometimes they are more straightforward, but there is some 
sanity to using numbers between 0 and 255. This number is related 
to the number of values that can be held in one byte of information. 
So, for historical and technical reasons, 255 is often used as a unit 
of measurement for specifying red, green, and blue values in a color, 
In fact, you might have noticed that photo editing applications often 
allow you to specify color values from 0 to 255 (if not, you’ll see how 
to do that shortly). 


I never see anyone use rgb or actual color names in their 
CSS. It seems everyone uses the #00fc9a type of color codes. 

Using rgb percents or numeric values is becoming more 
common, but you are right, “hex codes” are still the most widely used 
because people consider them a convenient way to specify color. 

Is it important that I be able to look at something like 
rgb(100, 50,200) and know what color it is? 

Not at all. The best way to know what rgb(100, 50, 200) looks 
like is to load it in your browser or use an online color picker or photo 
editing application to see it. 
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Specify color using hex codes 

Now let’s tackle those funky-looking hex codes. Here’s the secret to them: each set of two 
digits of a hex code just represents the red, green, and blue component of the color. So the 
first two digits represent the red, the next two the green, and the last two represent the blue. 
Like this: 


/\l>ways s*tav*t a todc 
v/itK sign. 


#cc6600 

Mi 

\rcd 3 代 


TVh spcdi-fy -the 
yr^r\, and blue 
usihj 

two digits for ea^K. 



Wait a sec, how is xx f 
or 、、 c 〃 a digit? Those 
are letters! 



Believe it or not, they are digits, but they’re 
written using a notation only a computer 
scientist could love. 

Here’s the second secret to reading hex codes: each set of two 
digits represents a number from 0 to 255. (Sound familiar?) 

The problem is that if we used numbers, we’d only be able to 
represent up to 99 in two digits, right? Well, not wanting to be 
constrained by something as simple as the digits 0-9, computer 
scientists decided they could represent all 256 values with the 
help of some letters too (A-F). This is the hexadecimal system of 
numbering, or u hex’’ for short. 

Let’s take a quick look at how hex codes really work, and then 
we’ll show you how to get them from color charts or your photo 
editing application. 
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The iwo-miwute guide to hex codes 


The first thing you need to know about hex codes is that they aren’t based on 10 
digits (0 to 9); they’re based on 16 digits (0 to F). Here’s how hex digits work: 



Us'm^ k 乂 , you only y'ccd 3 single 

dijii bo douy\i all >way -f'rom 

0 bo 1^- you jci above % 
you stay 七 us'mj Irttevs. 


So if you see a hex number like B, you know that just means 11. But what does BB, 
or El, or FF mean? Let’s disassemble a hex color and see what it actually represents. 
In fact, here’s how you can do that for any hex color you might encounter. 


Step one: 

Separate the hex color into its three components. 

Remember that each hex color is made up of a red, green, and blue component. 
The first thing you want to do is separate those. 


# CC 66 00 


Take youv Kc% dolov and 
bveak i*t m*bo i*ts vcd> 

ar\d blue dompoy\Cr»*ts. 
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Step two: 

Convert each hex number into its decimal equivalent. 

Now that you have the components separated, you can compute the value for 
each from 0 to 255. Let’s start with the hex number for the red component: 


cc 


humbcv dhd wvi-tc dovm 
•"ts dcdimdl vdlue. 



So 2-0^ "tV^c dctwal 
C cyu'»valcir\t o-f CC 


Step three: 

Now do this for the other two values. 

Repeat the same method on the other two values. Here’s what you should get: 


CC 66 

204 102 


00 

o 


To daldulatc you Kavc 
0> 决 M) + 石 二 lot. 


To daldulaie 00, you Kavc 
to ^ + 0 - O. 


Step four: 

There is no step four; youVe done! 

That’s it. Now you’ve got the numbers for each component and you know 
exactly how much red, green, and blue go into the color. You can disassemble 
any hex color in exactly the same way. Now let’s see how you’ll usually 
determine web colors. 
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Putting it all together 


You’ve now got a few different ways to specify colors. Take our orange 
color that is made up of 80% red, 40% green, and 0% blue. In CSS, 
we could specify this color in any of these ways: 


80% Red 


0% Blue 



body 


background-color : rgb(80%, 40%, 0%) ; ^ £pcdi-fy by tKc pevdentage 

o-f ved, gvcch, a^di blue. 



40% Gree ： 



body 


background-color : rgb(204, 102, 0); 


^^amount v-cd, 
W'ac or\ *tV\c stale 0 -2^ 弓 . 


body 


background-color : #cc6600; 


using a lie% dodc. 


How to find web colors 

The two most common ways to find web colors are to use a color chart or an 
application like Photoshop Elements. You’ll also find a number of web pages that 
allow you to choose web colors and translate between rgb and hex codes. Let’s 
check out Photoshop Elements (most photo editing applications offer the same 
functionality). 


Most fiio-to editmg 
olff libations fv-ovidc a dolov- 
fi^kcv ilioii allows you io 
visually dlioose youv- dolov 
by using ohc ov- move dolov 
spcd*tv*ums. 


Colov- ^itkevs also 
alloy; you *to sclct*t 
o^ly W y/cb— 
dolov-s. Well talk 
about 七 V>is m a scd.. 


Color Picker 


Sefect foreground color: 


_ Only Web Colors 


OK 



Cancel 


Help 


Otktt you’ve picked 
■ a dolov, ilic dolov 
' fitkev- y/i|| show you 

_ *tiic dolov as bcrti> 
— v-<xb values Br\d d 



•9* 

lie 夂 todt- 
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Using an ov\\m color chart 

You’ll also find some useful color charts on the 
Web. These charts typically display web colors 
that are arranged according to a number of 
different criteria with their corresponding hex 
code. Using these colors is as easy as choosing 
the colors you want in your page and copying 
the hex codes into your CSS. 


Jgi6 Cde» - WJcip^A, th« tr^p •ncyrlopMiu 


丁 his dliav-t is maiirtaihed by iVikipcdia at 
Ivttf:// Ch.y/ikipcdiao\rg/y/iki/Web 一 dolovs. 
Y® u II also -fmd mahy oiKcvs by seav-dhiha 
-fov- w ttT/WL toW dKavis. w 


Try out 七 he dcdovativc 
name *(x> see i-f i*t y/ovks 
ddross b\roy/scvs. |-f i*t 
docs^*t> tiicn use the Kc% 
Code 


HTML name 


UghtCoral 


Hex code Decimal code 
R G 8 RGB HTML name 

Red colors - 

■ Grd«n colors 

GreenYellow 

FO BO 80240 128 1J8 Chartreuse 
FA 80 72 250 128 1 H LawnGreen 
DarkSaJaion E9 9£ 7A 233 ISO 122 Ume 

UghtSafcnon rr ao 7a 255 1 60 122 UmeOrMn 32 c 

Q^Q PaleGreen 

MediumSpringGrei 




Hen code Decimal code 
RGB RGB 


HTML namt 


rr rtU /A 


255 


220 20 60 


AD Pr 2F173 255 
7F FF 00 127 25S 
7C rc 00 124 252 
00 PP 00 0 255 

CD 32 50 203 


SpringGroen 


98 FB 98 152 251 152 BurtyWood 

90 EE 90 144 238 144 Tan 

00 PA 9A 0 250 154 RotyBfOwn 

oo rr 7F 0 255 127 SandyBrown 


Hex code Decimal code 
RGB RGB 

Brown colors 

47 Cofnsi,k rr F8 DC 255 248 220 

0 Bfar>chedAlmond FF EB CD 255 235 205 

Bisque rr E4 C4 255 228 196 

joWhite FF DE AD255 222 173 

rs DE B3 245 222 179 
DE B8 87222 184 135 
02 B4 «C210 180 140 
BC 8P 8F 188 143 143 
F4 A4 90244 164 96 


Navajo 、 

Wheat 


Goldenrod DA A5 20210 165 32 

^ 騸 B 圓_圜 

5 ™™™° ^SSS hb 憩 b 


rr ao 7A255 1(0 122 


ModiumAquamarino 66 CD AA102 205 170 


Yellow colors 


SSB 議 ; il 


G^cj 

rr D7 00255 215 0 

Yellow 

UDhtYeNow 

wr rr 00255 255 0 

rr vb> va __ 


LfimonChiff< 
LightGoWen 
PapayaWhip 
Moccasin 
PeachPuff 
PaleGoldenrod 
Khaki 


Purpk colors 

Lavender 

T^stte 

Plum 

Violet 


MediumT urQuoisa 


Blue/Cyan colors 


LightCyan 

FF FA CD 255 250 205 PaleTurquoise 
nrodYeltowrA fa D2 250 250 210 Aquamarine 
FF Ep D5 255 239 213 Turquoise 
FF E4 B5 2S5 228 181 
FT DA 89 255 218 185 
EE Efl AA238 232 170 
TO B6 8C240 230 140 
BD B7 6B 189 183 107 UghtStecIBIue 
PowderBlue 

E6 E6 FA 230 230 250 Ughtfilue 
D8 Br D8216 191 216 SkyBlue 
00 A0 D D 221 160 221 LightSk 
EE 82 EE 238 130 238 
DA 70 D6 218 112 214 


White 
Snow 
Honeydew 
MintCroam 
_ Azure 
AliceBfue 

00 rr rr 0 255 255 GhostWhite 
00 FF FF 0 255 255 WhfteSmoke 
E0 rr FF 224 255 253 Seasheti 

AF EE EE 175 238 238 Beige 
7F rr 04 127 255 212 OWLac© 

40 20 00 64 224 208 BocalWhite 
48 D1 cc 72 209 204 Ivory 

Ant»qu©While 

Linen 

LavenderBjusf) 
80 C4 OK 176 196 222 MistyRose 
BO EO E6 176 224 230 Gray colors 


FF FF IT 255 255 255 
FT FA FA2SS 2S0 2S0 
ro rr F 0240 255 240 

rs FP FA 245 25S 250 
F0 PP* PP240 255 255 
F3 PP240 248 255 
« Ffl FF248 248 255 
F 5 F5 F5 245 245 245 
IT F5 EB255 245 238 
F*5 F5 DC 245 245 220 
FD F5 E6 253 245 230 
FF FA F0 25S 250 240 
FF PF P0 2SS 25S 240 
FA EB D7 250 235 215 
FA F0 E6 250 240 230 
FF F0 F5 255 240 245 
rF E4 El 255 228 225 


SkyBkje j 

mSi 


90 PFj 30 


Gainsboro 

DC 

DC 

DC 220 

220 

220 

LightGroy 

D3 

D3 

D3 211 

211 

211 

Silver 

CO 

CO 

CO 192 

192 

192 

OarKGray 

K9 

A9 

A9169 

169 

169 

Gray 


80 

80128 

128 

128 


theretare no o 

Dumb Questions 


I heard that if I don’t use web-safe colors, my pages will 
never look right on other browsers. Why haven’t we talked about 
web-safe colors? 

Back in the early days of web browsers, few people had 
computer screens that supported a lot of colors, so the web-safe 
palette of colors was created to ensure that pages looked consistent 
on most displays. 

Today the picture has changed drastically and most web users have 
computer displays that support millions of colors. So, unless you have 
a special set of users that you know have limited color displays, you 
can pretty much count web-safe colors as a thing of the past. 

I know how to specify colors now, but how do I choose 
font colors that work well together? 


It would take an entire book to answer that question properly, 
but there are some basic guidelines to selecting font colors. The 
most important is to use colors with high contrast for the text and 
the background to aid readability. For instance, black text on a white 
background has the highest contrast. You don’t always have to stick 
with black and white, but do try to use a dark hue for the text, and a 
light hue for the background. Some colors, when used together, can 
create strange visual effects (like blue and orange, or red and green), 
so try your color combinations out on some friends before launching 
them on the world. 

I’ve seen hex codes like #cbO; what does that mean? 

You’re allowed to use shorthand if each two-digit pair shares 
the same numbers. So, for instance, #ccbb00 can be abbreviated 
#cbO, or #11eeaa as #1ea. However, if your hex code is something 
like #ccbb10, then you can’t abbreviate it. 
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put your hex skills to the test 



Crack fhe Safe Challenge 

Dr. Evel’s master plans have been locked away inside his personal safe and 
you’ve just received a tip that he encodes the combination in hex code. In fact, 
so he won’t forget the combination, he makes the hex code the background 
color of his home page. Your job is to crack his hex code and discover the 
combination to the safe. To do that, simply convert his web color into its red, 
green, and blue decimal values, and you'll have the right-left-right numbers of 
his combination. Here’s the background web color from his home page: 


body { 

background-color : #b817e0; 

} 

Crack the code, and then write the combination here: 


KICIII LEFT RIGHT 
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Pack to Towy's pagc...weVG going to make the 
headings orange and add an underline too 

Now that you know all about color, it’s time to add some color to Tony’s web page. He wanted 
orange, and he’s going to get orange. But rather than making all his text orange — which would 
probably be unattractive and hard to read against a white background — we’re going to add a subtle 
splash of color in his headings. The orange is dark enough that there is good contrast between the 
text and the background, and by color-coordinating with the orange in the photos (Tony’s shirt), 
we’re creating a color relationship between the headings and the photos that should tie the images 
and text together. And just to make sure the headings stand out and create separation between 
the journal entries, we’ll also add an underline to each heading. You haven’t seen how to add an 
underline yet, but let’s do it, and then we’ll look at more about text decorations. 

Here are all the changes in the CSS. Make these changes in your “journal.css” file. 


@font-face { 

font-family : "Emblema One ’’； 

sre : url ("http : / / wickedly smart. com/hf h tmlcs s / chap ter 8 / j ournal / EmblemaOne - 
Regular• woff ’’）， 

url("http : //wickedlysmart.com/hfhtmlcss / chapter8 / j ournal / EmblemaOne - 
Regular.ttf"); 


body { 

font-family : Verdana, Geneva, Arial, sans-serif; 


hi 


hi 



color : #cc6600; 
text-decoration : 



underline; 


WcVc b> make both <Kl> 扣 d <K2-> so 

>wcVc tKc dolov m a sKav-cd v-ulc. 

—- — • ttcvVs the Kcx. to&t -fov- ov-awjc dolov- 7or\y 
otKcv-y/isc known as 午 0%, 0%). 



font-family : "Emblema One’’ ， sans-serif; 
font-size : 220% ; 


\\^ts the way wc dv-catc 
uhdeirlihe. Wc use 4c Ic^i-dcdovatioh 
p^ropcriy ahd sti ii -to uhderl'me. 


font-weight: normal; 
font-size : 130%; 


Koiitc i\>ai >wc ^ ^rulc -fov \)oi\\ 

七 lie <V)I> dl^di Tills is d ^ood 

-to do because \i v-cdudcs dupka 七 io”. 


blockquote { 

font-style : italic; 
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testing heading colors 



Test drive Towy's orange headings 

Once you’ve made the changes to your “journal, 
css” file to add the color property to the hi, h2 rule, 
reload the web page and check out the results. 


1^1 o^i <Kl> dv\d <K2-> 

avc orange- TVis -tics m y\itcly v/ith 

lo^ys ov-ar\^e -tiicmc shiv 七 . 


Documenting my trip around the US on my very own Segway 

August 20. 2012 


TU ^cad'mjs arc also sci ^ wd 饮 Ues. 

七 hou 吵七 Wis v/ould be 3 Jood >way -to 
a-istmjuis^ i\^t kadmy, bu 七 adiually i^cy seem look 
a Irt-tlc -too mud^ like tlitkablc Uks, smdc —e 七 ⑶ d *to 
七 Wk u^dcv-l'mcd m 3 v/cb is tlidkablc- 


£o, u^dev-l'mes may Kavc bcc^ a bad eMo\tt- 
Lets c^uidkly look at some oiKcv- icx.t 
dcdovdtioi^s, "tKcn v/c ll vcdor\sidcV" "t^ese 
uhdcvl'mcs m iKc >wcb page- 


Well I made it 1200 miles already, and I passed through some 
interesting places on the way: 


1. Walla Walla, WA 

2. Magic City, ID 

3. Bountiful, UT 

4. Last Chance, CO 

5. Truth or Consequences, NM 

6. Why, AZ 


July 14 r 2012 

I saw some Burma Shave style signs on the side of the road today 


Passing cars, 

When you can't see. 
May get you, 

A glimpse. 

Of eternity. 


I definitely won't be passing any cars 

June 2, 2012 


角 n 一 


My Trip AruuruJ the USA 


O n vO file:///chapter8/journal/journal.html 


Sharpen your pencil 


What do all these colors have in common? Try each one in a web page, say as a font 
color, or use your photo editing application’s color picker to determine what colors 
they are by entering the hex code into the dialog box directly. 


#111111 

#222222 

#333333 


#444444 

#555555 

#666666 


#777777 

#888888 

#999999 


#aaaaaa 

#bbbbbb 

#cccccc 


#dddddd 

#eeeeee 
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styling with fonts and colors 


Everything you ever wanted to know about 
text decorations m less thaw one page 


Text decorations allow you to add decorative effects to your text like underlines, overlines, 
and linethroughs (also known as a strikethrough). To add a text decoration, just set the 
text-decoration property on an element, like this: 


em 


text-decoration : line-through; 



TKis vulc >will tausc -Bic 
<tn\> clcmch*t io Kavc a 
I'me 七 middle 
七 lie 七 wt. 


You can set more than one decoration at a time. Say you want underline and overline at 
the same time — you specify your text decoration like this: 

TKis vulc vcsults \ y \ tKc <cm> 
element an undcvlmc 
AND ov^rlme. 

And if you have text that is inheriting text decoration you don’t want, just use the value “none ”： 

W\{}\ this \rulc ； <cm> clcmcyvts 
v/ill Kavc y\o dcdov-atiow. 


em { 

text-decoration : none; 


em { 

text-decoration : underline overline; 


thereicire no o 

Dumb Questi 9 ns 


So if I have two different rules for an <em>, and one 
specifies overline and the other underline, will they be added 
together so I get both? 

No. You need to combine the two values into one rule to get 
both text decorations. Only one rule is chosen for the text-decoration, 
and decorations in separate rules are not added together. Only the 
rule that is chosen for the text-decoration styling will determine the 
decoration used, so the only way to get two decorations is to specify 
them both in the same text-decoration declaration. 

I’ve been meaning to ask why the color property isn’t 
called text-color? 


The color property really controls the foreground color of an 
element, so it controls the text and the border color, although you can 
give the border its own color with the border-color property. 

I like the linethrough decoration. Can I use it on text I’m 
editing to indicate things that need to be deleted? 

You could, but there’s a better way. HTML has an element 
we haven’t talked about called <del> that marks content in your 
HTML as content that should be deleted. There is a similar element 
called <ins> that marks content that should be inserted. Typically 
browsers will style these elements with a strikethrough and underline, 
respectively. And with CSS, you can style them any way you like. By 
using <del> and <ins>, you are marking the meaning of your content 
in addition to styling it. 
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using a border instead of an underline 


Removing the underline... 

Let’s get rid of that confusing underline and instead add 
a nice bottom border like we did in the lounge. To do 
that, open your “journal.css” file and make these changes 
to the combined hi, h2 rule: 

hi, h2 { 

color : #cc6600; 
border-bottom : thin dotted #888888; 
text - dee o rati o n : underline; 




Add a bov-dev- oy\ a”d 

<\{l> clcmc^-ts. You almost rtad i^is like 
w add a 七 W, do-tied I'mc i\\t 
to\or # 柳仰仰 on bottom bovdW … 

In the dKaftcv -； wc av-c going -to go *m*to 
bov-dev-s \ y \ dc*tail. oy \, wcVc almos-t tlicv-c/ 

Delete ihc it%i dedovatioh. 


And here’s how our new “underline” looks- 
definitely more stylish and less confusing 
than a text decoration underline. 


\io\n got bovdev-s undev- tKc <Kl> 

and <KZ> clcmcn-t, not ur^dcv-l'mcs. 


No 恤如 U 。 如 aWd all ^叫 

wsU^^te ， t^ 7 ?VouliW 

ouU ⑽七 ^a ? W- 


(^i My Trip Around the USA on 
O A © file:///chapter8/journal/journal.html 


» 


Sefjwtiy'n USA 

Documenting my trip around the US on my very own Segway! 

August 20, 2012 


Well I made it 1200 miles already, and I passed through some 
interesting places on the way: 

1. Walla Walla, WA 

2. Magic City, ID 

3. Bountiful, UT 

4. Last Chance, CO 

5. Truth or Consequences, NM 

6. Why, AZ 

July 14, 2012 

I saw some Burma Shave style signs on the side of the road today: 

Passing cars, 

When you can't see. 

May get you, 

A glimpse, 

Of eternity. 


I definitely won't be passing any cars. 


//\ 
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styling with fonts and colors 


BULLET POINTS - 

■ CSS gives you lots of control over the look of your 
fonts, including properties like font-family, font- 
weight, font-size, and font-style. 

■ A font-family is a set of fonts that share common 
characteristics. 

■ The font families for the Web are serif, sans-serif, 
monospace, cursive, and fantasy. Serif and sans- 
serif fonts are most common. 

■ The fonts that your visitors will see in your web 
page depend on the fonts they have installed on 
their own computers, unless you use Web Fonts. 

■ It’s a good idea to specify font alternatives in your 
font-family CSS property in case your users don’t 
have your preferred font installed. 

■ Always make the last font a generic font like serif 
or sans-serif, so that the browser can make an 
appropriate substitution if no other fonts are found. 

■ To use a font that your users may not have 
installed by default, use the @font-face rule in 
CSS. 

■ Font sizes are usually specified using px, em, %, 
or keywords. 

■ If you use pixels (“px”）to specify your font size, 
you are telling the browser how many pixels tall to 
make your letters. 

■ em and % are relative font sizes, so specifying 
your font size using em and % means the size of 
the letters will be relative to the font size of the 
parent element. 

■ Using relative sizes for your fonts can make your 
pages more maintainable. 


Use the font size keywords to set the base font 
size in your body rule, so that all browsers can 
scale the font sizes if users want the text to be 
bigger or smaller. 

You can make your text bold using the font-weight 
CSS property. 

The font-style property is used to create italic or 
oblique text. Italic and oblique text is slanted. 

Web colors are created by mixing different 
amounts of red, green, and blue. 

If you mix 100% red, 1 00% green, and 100% blue, 
you will get white. 

If you mix 0% red, 0% green, and 0% blue, you will 
get black. 

CSS has 16 basic colors, including black, white, 
red, blue, and green, and 150 extended colors. 

You can specify which color you want using 
percentages of red, green, and blue, using 
numerical values of 0-255 for red, green, and blue, 
or using a color’s hex code. 

An easy way to find the hex code of a color you 
want is to use a photo editing application’s color 
picker or one of many online web tools. 

Hex codes representing colors have six digits, 
and each digit can be from 0-F. The first two digits 
represent the amount of red, the second two the 
amount of green, and the last two the amount of 
blue. 

You can use the text-decoration property to create 
an underline for text. Underlined text is often 
confused as linked text by users, so use this 
property carefully. 
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a crossword on fonts and color 



HTMLcposs 

You’ve absorbed a lot in this chapter: fonts, color, weights, and styles. It’s 
time to do another crossword and let it all sink in. 



Across 

1. Similar fonts are grouped into_. 

3. Use the_rule in CSS to load fonts from the Web. 

4. When you specify fonts in the font-family property, you 

are specifying_. 

6. Considered cleaner and easier to read on a computer 
display. 

8. You can specify fonts in terms of pixels, em, or_. 

12. Underline and linethrough are examples of text_. 

13. em and % are both this kind of size. 


Down 

1. Font family almost never used in web pages. 

2. Browser that doesn’t handle pixel font sizes well. 

5. Hex codes use this many different digits. 

7. Fonts with little barbs on them. 

9. Colors like #111111 through #EEEEEE are all shades 

of_■ 

10. Controls how bold a font looks. 

11. Element that can be used to mark text for deletion. 
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styling with fonts and colors 


Font Magnets Solution 

Your job was to help the fictional fonts below find their way 
home to their own font family. You moved each fridge magnet 
into the correct font family. Check your answers before you 
move on. Here's the solution. 



Fantasy family 



Cursive family 
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exercise solutions 



Crack fhe Safe Challenge Solution 

Dr. Evel’s master plans have been locked away inside his personal safe and 
you’ve just received a tip that he encodes the combination in hex code. In fact, 
so he won’t forget the combination, he makes the hex code the background 
color of his home page. Your job is to crack his hex code and discover the 
combination to the safe. To do that, simply convert his web color into its red, 
green, and blue decimal values, and you'll have the right-left-right numbers of 
his combination. Here’s the background web color from his home page: 


body { 

background-color : #b817e0; 

} 

Crack the code, and then write the combination here: 


(II 决 M) 十 0 二 0 ^ + 7 n 

KIGIII 午 LEFT. 7r?> 


(I 午 ^ + 0 - 

RIGHT m … 



358 Chapter 8 









styling with fonts and colors 


^harpen your pencil 


What do all these colors have in common? 
You can try each one in a web page, or use 
the color picker to determine what colors 
they are, by entering the hex code into the 
dialog box directly. 


#111111 

#222222 

#333333 

#444444 

#555555 

#666666 

#777777 

#888888 

#999999 

#aaaaaa 

#bbbbbb 

#cccccc 

#dddddd 

#eeeeee 



o^c 


All dolovs use jus-t 
d\yi m Kc% toAts 
avc -fvom vcv-y dav-k 
(almost Wadk) ^ v^y W^i 
(almost y/Wrte). 



HTMLcross Solution 
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9 the box model 



步命 

Getting Intimate # 
+ with Elements 


To do advanced web construction, you really need to know 

your building materials. In this chapter we’re going to take a close look 
at our building materials: the HTML elements. We’re going to put block and inline 
elements right under the microscope and see what they’re made of. You’ll see how 
you can control just about every aspect of how an element is constructed with CSS. 
But we don’t stop there — you’ll also see how you can give elements unique identities. 
And, if that weren’t enough, you’re going to learn when and why you might want to use 
multiple stylesheets. So, turn the page and start getting intimate with elements. 


I think wed be a little 
closer if it weren*t for all 
the padding, margins, and 
this darn table. 


this is a new chapter 
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what we 1 re going to do with the lounge 


The lounge gets m upgrade 

You’ve come a long way in eight chapters, and so 
has the Head First Lounge. In fact, over the next 
two chapters, we’re giving it a total upgrade with 
all new content for the main page and restyling it 
from scratch. And, just to entice you, we’re going 
to give you a little sneak peek before we even 
get started. Check this out — on this page, you’ll 
find the new unstyled lounge page with all the 
new content. On the next page, you’ll find the 
stylized version that we’re going to create by the 
end of the next chapter. 


TKc lowr^e w have sullied s 
lot o-f dcstv-ib'mj 

o-f-fevs. 


mdludcd a sc*t o-f 

cli%iv sf>edidls -fov >wcck. 


lei visi-tov-s sample some o( 

musid Aa 七 is flayed m iiic lou^jc cadii v/cck, a 

^ommoyt VC<\uCst o( tus-bomCV-s. 


Finally, they’ve 30 七 some lejalese in 七 he 
-footev- o( -tlic page y/iiK a do^yv-ijli*t. 


0 OO 

11 ^ t ► - Mfilc：///ch 4 p(cr 9 /loung«/loung«.html 


H«ad First Lounge 


C Coofllt 



_ Head First w 

Lounge 


^T\\trts a v\t^ *fov 
七 he iicadcv- fay. 


Welcome to the Head First Lounge 


The Head First lounge is, no doubt, the biggest trendsetter in Wcbvtllc. Stop in to sample the eclectic offering of elixirs, 
tcus, and cofTccs, nr t stay u hit longer und enjoy the multiculturul culinury menu that cumhincs u hurmnny nf tuxtc, 
texture, and color with the best in fresh and healthy ingredients. 

During your stay at the lounge, you'll enjoy a smooth mixture of ambient and mystic sounds, filling the lounge and 
adding an extra dimension to your dining experience. The decor surrounds you with the relaxing sentiments of sights 
from eras past. And, don't forget, the lounge offers free wireless occc5L<; to the Internet, so bring your laptop. 

Our guarantee: at the luungc, we're committed tu providing yuu, uur guest, with an CACcptionsil experience every time 
you visit. Whether you're just stopping by to check in on email over an elixir, or arc here for an out-of-thc-ordinary 
dinner, youll find our knowledgeable service staff pay attention to every detail. If you're not fully satisfied, have a 
Blueberry Bliss Elixir on us. 

Hut that's not ull; ut night，join us in the hacknxim us nur resident Di spins u choice selection or trance und drum&huss 
bcats> across our spacious tiki-themed dance floor. Or just hang out in one of uur cumfy white vinyl booths at Ihc dance 
bar. You can have your elixirs delivered from the main lounge right to the dance floor. If you've had enough of the beat, 
just head back to the lounge area to relax. And. do matter where you find yourself In the lounge, you’ll always be 
connected with our wireless Internet access. 

Now thul you've cxpcricncocl (he Icmngc virtually, isn't il time tn check us nut far rr.atl We're htcutcd right in the heart of 
Wcbvillc* and we've created some detailed directions tu get you here in record time. No n^ervatiuns necessary; cumc 
and join us anytime. 

Weekly Elixir Specials 


Lemon Breeze 

The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a 
smooth citrus wonder that will keep your immune system going all day and all night. 


« 


Chai Chiller 

Not your traditional chai, this elixir mixes mnuS with chai spices and adds an extra chocolate kick for a caffcinatcd taste 
sensation un ice. 


Black Bruin Brew 

Want to boost your memory? Try our Black Brain Brew elixir, made with black oolong tea and just a touch of espresso. 
Your brain will thank you for the boost. 

Join us any evening for these and all our other wondcrfiil elixirs. 

What's playing at the Lounge 

We're frequently asked about the music we play at the lounge, and no wonder, it's great stuff. Just for you, we keep a list 
here on the site, updated weekly. Enjoy. 

• Buddha Bar, Claude (!hallc 

• When It Falls，/cm 7 

• Earth 7, L.TJ. Bukem 

• Lc Roi Est Mort, Vive Lc Roi!, Enigma 

• Music for Airports, Brian Eno 

© 2012, Head First lounge 

All tmdcmark.s and registered trademarks appearing on this site aru the pmperty of their respective owners. 
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e o o 


Head First Lounge 


Head First 


Lounge 


» 


si*tc s 

tolov -tKcmc, a<\uaw»avmc. TKc -fonts 
also a vcv*Y V*c3d3blc S3yvs— scvi-f. 


avc 


Welcome to the Head First Lounge 

The Head First Lounge is, no doubt, the biggest trendsetter in Webville. Stop in 
to sample the eclectic offering of elixirs, teas, and coffees, or, stay q bit longer 
and enjoy the multicultural culinary menu that combines o harmony of taste, 
texture, and color with the best in fresh and healthy ingredients. 

During your stay at the lounge, you'll enjoy a smooth mixture of ambient and 
mystic sounds, filling the lounge and adding an extra dimension to your dining 
pxpftripnrft. Thp ripror surrnunds ynu wirh thp relaxing qpntimpnt<; nf sights 
from eras past. And, don't forget, the lounge offers free wireless access to the 
Internet, so bring your laptop. 


Our guarantee: at the lounge, we're committed to providing you, our 
yita>l, with un acceptionul experience every linte you uhiil. WluUfitr 
you're just stopping by to check in on email over an elixir, or are here 
for an out-of-the-ordinanj dinner, ijoull find our knowledgeable service 
staffpay attention to every detail. If you're not fiilly satisfied, have a 
Blufdx^rry Elixir un w>. 


But that's not all; at night, join us in the backroom as our resident DJ spins a 
choice selection of trance and drum&bass beats across our spacious tiki-themed 
dance floor. Or just hang out in one of our comfy white vinyl booths at the 
dance bar. You can have your elixirs delivered from the main lounge right to 
the dance floor. If you've had enough of the beat, just head back to the lounge 
area to relax. And, no matter where you find yourself in the lounge, you'll 
always be connected with our wireless Internet access. 

now that you.ve experienced the lounge virtually, isn't it time to check us out 
tor real? we*re located rignt m the heart of webville, and we've created some 
detailed directions to get you here in record time. No reservations necessary; 
come and join us anytime. 

What's playing at the Lounge 

Wp'rp frpquently ahnut thp mu<;ir wp pl^y thp Inungp, and nn wnnrtpr r 

it.s great stuff. Just for you, we keep a list here on the site, updated weekly. 
Enjoy. 

• Buddha Bar, Claude Challe 

• When It Falls, Zero 7 

• Earth 7, L.T.J. Bukem 

• Le Roi Est Mort, Vive Le Roi!, Enigma 

• Music for Airports, Brian Eno 


Weekly Elixir 
Specials 


Lemon Breeze 

The ultimate healthy drink, 
this elixir combines herbal 
botanicals, minerals, and 
vitamins with a twist of 
lemon into a smooth citrus 
wonder that will keep your 
immune sybturn yuiny dll day 
and all night. 


N This pav-agv-apli Kas Kighly stylized) 
whidli Kelps sc*t i*t o(( -fv- orw dnd 

jives 七 he page av\ attv-adiivc look. It also 
looks like 七 he -font is a sc\ri-f v/KidK is 
-f\r om mdih 七 ext 


Chat Chiller 

Not your traditional chai, this 
elixir mixes mate with chai 
spices and adds an extra 
chocolate kick for a 
caffeinated taste sensation 
on ice. 


Black Brain Brew 

Want to boost your memory? 
Try our Black Brain Brew 
elixir, made with black 
uuluny U^d arid jubt a luuLh uf 
espresso. Your brain will 
thank you for the boost. 

loin u<; ^ny pvpning for thp<;p 
and all our other wonderful 

elixirs. 


All trademarlcs and registered tradem^ 


^012, Head FKst Lounge 

► appearing on this site are the property of their respective c 


TliC rwusid CDs a^d a\r 七 is 七 s 
av-c s-tylcd wow -too. 


A^d tKc -foo-tev is 

dhd displayed 
•… a small -foiat 


TKc V^avc bcc” 

dvamat«tall7 v-cstylcd am 


TKc cli^ivs Kave also been moved ovcv- -to 
side- Ho>w did *tKat 


The new and improved, 
ultra-stylish lounge 

Not too shabby. Now the lounge design 
might be a tad on the, well, “ultra-stylish” 
side for you, but hey, it is a lounge. And 
we’re sure that you can see this design is 
starting to look downright sophisticated — 
just think what the same techniques could 
do for your pages. Well, after this chapter 
and the next, designs like this are going to be 
easily within your reach. 
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starting with simple styles 


Setting up the new lounge 


Before we start the major construction, let’s get familiar with the new lounge. 
Here’s what you need to do: 



with all new content. Open the file in your editor and have a look around. Everything 
should look familiar: head, paragraphs, a few images, and a list. 

You’re going to spend most of this chapter adding style to this HTML, so you need a 
place for your CSS. You’re going to create all new styles for the lounge in the stylesheet 
file “lounge.css”，so you’ll find your <link> element in the <head> of “loimge.html” is 
still there, but the previous version of “lounge.css” stylesheet is gone. 

<link type= n text/css n rel= M stylesheet" href= n lounge . css’▼> 

Remember, this <link> element tells the browser to look for an external stylesheet called 
“lounge.css”. 

Next, you need to create the new “lounge.css” in the “chapter9/lounge” folder. This file is 
going to hold all the new CSS for the new lounge. 


Starting with a few simple upgrades 


Now you’re all ready to start styling the lounge. Let’s add a few 
rules to your CSS just to get some basics out of the way — like the 
font family, size, and some color — that will immediately improve 
the lounge (and give you a good review from the last chapter). So, 
open your “lounge.css” file and add the following rules. 


body { 



rtevVs default 七 
siz^ •fov He 州 c- 


font-size : small; 

font-family: Verdana, Helvetica, Arial, sans-serif; 



elements ah *bo ^Idss in logo. 


font-size : 150%; 
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A very quick test drive 

Let’s do a quick test drive just to see how these 
styles affect the page. Make sure you’ve made all the 
changes; then save and test. 

Hedd'm^s av-c y\o>w s 扣 s - 
and a dolov 七 ha 七 
七 he logo, tv-cai'mj a 
■fov 

Pav-agv-a^K tc%*t is also sa^s-sev-i-f 、 
smde cvcv-y element mKcv-'rts tKc 
《 body’s -font—family pv-o^eviy. 


TKc <liZ> Kcddmj is also 
styled witli a wcw dolom ar\d 
sa^s-sev-i-f, bu 七 a 七 ad smaller. 

Wc Kavc^i allied any styles 
{jo tKc <\A>) so it jus 七 mKcvits 
iKc -font—family p\ropc\riy 
-fvom <body>- 

One more adjustment 


eee Head First Lounge 

(cl [ + p 0 file:///chapter9/lounge/lounge.html 


O 



^ Head First w 

ioutige 


> 


Welcome to the Head First Lounge 

The head First Lounge is, no doubts the biggest trendsetter in webville. Stop in to sample the 
eclectic ufTcririy uf elixirs, tedb, drid Loffeeb, ur, btdy d bit lunyer drid enjoy the mulliLulturdl 
culinary menu that combines a harmony of taste, texture, and color with the best in fresh and 
healthy ingredients. 

[During your <;tAy thft lounge, you'll pnjny a smooth mixture of amhipnt anrt mystir 兑 ourul 兔 , filling 
the lounge and adding an extra dimension to your dining experience. The decor surrounds you with 
tne relaxing sentiments of sights from eras past. And, don't forget, the lounge offers free wireless 
dccebb tu Uie Inter net, bu briny yuur Idptup. 

Our guarantee: at the lounge, we're committed to providing you, our guest, with an exceptional 
experience every time you visit. Whether you're just stopping by to check in on email over an 
ftlixir, nr arp hprp for an out-of-thp-ordmary rtmnpr, you’ll fmrt our knnwlpdgpahlp sprvirp staff pay 
attention to every detail. If you.re not fully satisfied, have a Blueberry Bliss Elixir on us. 

But that's not all; ot night, join us in the backroom os our resident DJ spins a choice selection of 
trance and drum&baee beats across our spacious tiki-thomed dance floor. Or just hang out in on© of 
our comfy white vinyl booths at the dance bar. You can have your elixirs delivered from the main 
lounge right to the dance floor. If you've had enough of the beat, just head back to the lounge area 
to rplax. Anri, no martyr whprp you find ynur<;p|f in rhp Inungp, ynu'll always r>p ronnprtftrt with our 
wireless internet access. 

Now that you've experienced the lounge virtually, isn't it time to check us out for real? Wc'rc 
located right in the heart of Wobville, and we've created some detailed directions to get you here in 
record time. No reservations necessary; come and join us anytime.. 


Weekly Elixir Specials 


This Uk looks oddly out o-f 
W\i\\ its dc-fault blue tolov. Wt\\ 
ii3vc *bo -f »% 七 ha 七 (Utcv*)- 


Lemon Breeze 


Th© ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a 
twist of lemon into a smooth citrus wonder that wilJ keeo vour immune system ooino all dav and all T 


We’re going to make one more adjustment to the 
lounge before we move on to start making some bigger 
changes. This adjustment involves a new property you 
haven’t seen before, but at this point, you’ve got enough 
experience under your belt that we’re not going to treat 
you with kid gloves every time a new property comes 
along. So, just jump in and give it a try. 

Here’s what we’re going to do: we’re going to adjust the 
line height of the text on the entire page so that there’s 
more vertical space between each line. To do that, we 
add a line-height property in the body rule: 


l^dv-cas'mg the [\Y\t heijh-t o-f youv 
tBY\ impv-ovc \rcadabili*by. It also Jives 
you a^o*bhcv way bo pv-ovidc do 灼 "brast 

between di-f-fcv-c^t pav-ts of your pay 

(you’ll sec how that wo\rks *m a bit). 


body { 

font-size : small; 


Hcvc y/cVc 七 lie spade bcty/ccn eadK Imc 七 o I • 厶 cm— 

•m o 七 iicv y/ovdU, I .厶 times 七 he -font siz-c- 


font-family: Verdana, Helvetica, Arial, sans-serif; 
line-height: 1.6em; 
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learning about line height 


Checking out the new line height 


As you might have guessed, the line-height property allows you to specify the 
amount of vertical space between each line of your text. Like other font-related 
properties, you can specify the line height in pixels, or using an em or percent 
value that’s relative to the font size. 

Let’s see what the effect of the line-height property is on the lounge. Make 
sure you add the line-height property to your CSS file and then save. You 
should see the line height increase when you refresh. 


8 8 0 Head First Lounge 

(< I [ C ] + J 0fil^7//rhapTcr < )/loungr/loungf.hrml 


a 


m^v-cascdi tlic spade bctv/ccirv eadK lirvc o( 

-fvom 七 lie dc-fault *to 






Welcome to the Head First Lounge 

The Head First Loun 抑 is, no doubt, the biggest trendsetter in Webvill«. Stop in to sample the 
eclectic offerirvg of elixirs, teas, and coffees, or, stay a bit longer and enjoy th« multicultural 
culinary menu that combines a harmony of toutL% texture, «ind color with the bcut in fresh and 
healthy ingredients. 

stay dl the lounge, you'll enjoy a smooth mixture of ambient and mystic : rounds, filling 
the lounge ar^d^^mg~arr«3c^?5-dimension to yoor din.ng experience. Tf^e decor surrounds you with 

irgpt # th« lounge offers tre-.e. 


iDuring your stay at the lounge, you'll enjoy a smooth mixture of ambient and mystic soonds^filling 

Ithe lounge and adding an extra dimension to your dining experience. The decor surrounds youwTth- 
the relaxing sentiment^^ight^rorr^r^^past^nd^on^oi^et^hMoung^offer^re^wireles^^^^^^^^^ 
|access to thelpnrinqvourstavatthelounQeTvoTnenlovasmoonTrrnxtureofambientandmvsticsoundsTfillinQ 
Ithe lounge and adding an extra dimension to your dining experience. The decor surrounds you with 
'■the relaxing sentiments of sights from eras past. And, don't forget, the lounge offers free wireless 
’ ^access to the Internet, so bring your laptop. 


our guivit, with .in rKcrprionAl 
by to^H^cjcJn on email over an 

ce staff pay 


H^ction of 
I out in one of 
I the main 
* lounge arftA 
dud with our 


\s kr\o>M^ as v lcadm^ ^ 

― 一 d 
如 ? uW»sWm 5 




Now that you've experienced the lounge virtually, isn't it time to check us out for re^f? We're 
located right in the heart of Webville, and we've created some detailed direct'or>s to get you h«re in 
record time. No reservations nvccusdry; come and join uu anytime. 

Weekly Elixir Specials 



T^c I'mc-iicijKi pvopeviy is miicv'rtcd, so by 
scitmj \i m i\\t body, all iKc clcmcy>is oh i\\t 
vb(kc y\o^j Kave a I'mc o-f I 



Try a few different values for line-height, like 200%, .5em, and 20px to see the 
effect. Which looks the best? The worst? Which is most readable? When you’re 
done, make sure you change the line-height back to 1.6em. 
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the box model 


fretting ready for some major 
rewovatiows 


After only a few pages of this chapter, you already have a ton of 
text style on the new lounge. Congrats! 

Now things are going to get really interesting. We’re going to 
move from changing simple properties of elements, like size, 
color, and decorations, to really tweaking some fundamental 
aspects of how elements are displayed. This is where you move 
up to the big leagues. 

But to move up to the big leagues, you’ve got to know the box 
model. What’s that? It’s how CSS sees elements. CSS treats every 
single element as if it were represented by a box. Let’s see what 
that means. 


a V>o%. 





£vc\ry box is made up of a 
Coni^i area alohj wi-tK optional 
padding, bo\rdcv, a^d 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


V 

TKc doh 七 ent avea Kolds 七 lie 

ov By\ image, -fov 


The doirten 七 avea is suv-vounded 
by oftio^al tvanspavcht fadding. 


oftiohal bovdev dan be 
avound -the 


瓜 d “ally, opiio^l 
■tlrahspaircivt 
sunrouhds cvciry-thihj. 


All elements av-c tveated as bo%cs ： 
fav-agv-apiis, blodk quotes, 

lists, list rtems, and so on. Even mime 
elements like <tn\> links av-c 
tv-catcd by CSS as bo%cs. 
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the box model up close 


A closer look at the box model 

You’re going to be able to control every aspect of the box with 
CSS: the size of the padding around the content, whether or not 
the element has a border (as well as what kind and how large), 
and how much margin there is between your element and other 
elements. Let’s check out each part of the box and its role: 

TKc don 七 cn 七 avea Kolds 七 lie elements 
don 七⑶ 七 . It’s typidally jus 七 big cnoujK 
bo hold tKc v 

V 


What is the 

content area? 

Every element starts with some 
content, like text or an image, 
and this content is placed inside 
a box that is just big enough 
to contain it. Notice that the 
content area has no whitespace 
between the content and the 
edge of this box. 



a>rv cdjc 

avound tiic 
aved jus-t so you k>rvo>w 
bij it is- But m d 

bvoy/sev, tKcvc is nevcv 
a visible cdy avou 灼 d 
七 lie 60 灼七伙七 3 v*c 3 - 



"o ur guarantee: at the lounge, we’re 

committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


What is the padding? 

Any box can have a layer of padding 
around the content area. Padding is 
optional, so you don't have to have it, 
but you can use padding to create visual 
whitespace between the content and 
the border of the box. The padding 
is transparent and has no color or 
decoration of its own. 


TKc bvowsev adds optional padding avou^di 



Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 
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IXsir^ CSS ； you \rc gomg *to be able *to Coivbrol v/idtii o( 
the fadd'mj abound iht cniivc dohtcht avea, ov even ^onivol 
fadd'mg oy\ any one side (bo^, vighi ； bottom, ov Ic-f-t). 
















the box model 


Koiidc i\\ai tV)c 
scpav-a*tcs 七 he doy\ic^i 3 v-ca 
-fv-om iiic bov-dcv-. 


IXsmg CSS ， you’ve 50 'mj -to be able io dohivol 
■tiie to\o\-, and style of -tiic bov-dev-. 


\l/ 


What is the border? 

Elements can have an optional 
border around them. The border 
surrounds the padding and, 
because it takes the form of a 
line around your content, provides 
visual separation between your 
content and other elements on the 
same page. Borders can be various 
widths, colors, and styles. 


Bov-dcv- 


Padd'mj 


Coy\*t ⑶七 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 

JH^ ve " detail - Ify ° u，renotfullysatisM 


have a Blueberry Bliss Elixir on us. 


CSS ； you’ve 50 'mg -to be able io donivol 
tiic y/idili 0 + ilic cniivc ov o*f ar\y 

favtidula^r Side (-tof, bottom, or le*f 七 ). 


What is the margin? 

The margin is also optional and 
surrounds the border. The 
margin gives you a way to add 
space between your element 
and other elements on the same 
page. If two boxes are next to 
each other, the margins act as 
the space in between them. Like 
padding, margins are transparent 
and have no color or decoration 
of their own. 



丁 his is 七 he errtive eleven 七 • Wc Kave a 
dOir\*tcir\*t avea, SUVVOimdcd toy optional 
padd'm^ su\rvouir\dcdi by an optional bovdev ； 
suw-ounded by an Optional mavg'rn. 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detailnot fully satisfied 
have a Bluebervv Bliss Elixir on us. 


Con 七伙七 


Padd'mj 


Bovdcv 


Mav-jm 
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how boxes can be configured 


What you caw do to boxes 


The box model may look simple with just the content, some padding, a 
border, and margins. But when you combine these all together, there 
are endless ways you can determine the layout of an element with its 
internal spacing (padding) and the spacing around it (margins). Take a 
look at just a few examples of how you can vary your elements. 


Porders 


Poxes 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you 5 ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


You s-tylc a bo% -to 
have a bovdev-, 

dr\d a wavj'm- 



^o\a 

bovdev-s, 


Kave solid I 

ov- 七 Wm. 



Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 



^addnrv^ ayvd 
a bovdev* 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 






bovdev- 


a 



Oy a mavjih y/i*tK 
y\o bovdev- y\o 
faddinj 


Ov y\o bovdev* 』 



Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


Ov dKoosc -fvom 
ci^lvt di-f-fcv-Cht 
styles o-f bovdevs, 
like dashed 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you，re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


Or tolov youv 


bov-dicv , s 




Or 


youv bov-dev-s 




Our guarantee: at the lounge, we’re 


committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 
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the box model 


Padding 




Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you，ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 



Margins 


CSS ； you 

dontvol any 

side 匕 0 灼七之灼七 

avea- Hcvc 50-t 3 
lot o-f Ic-ft ayvd 浐吵七 
padd'mj- 


You Kavc 七 he same 
level o-f d^ovrbrol ovcv 
七 he mavj'rns. Hcvc 
a lot 

dnd bo*t*to»»' w»av^nr>. 



Kcv-c -tKcv-c^ a loi 
-bop and bo*t*tom ^addimj- 



hire's a lot o*f 


/W Kcv-c iKc 
dontwt is 
o*Pf set 七 © tKc 
bo*t*tom vigil 七 
>wi*tK paddmj oy \ 

*tKc *to^> a^d Ic-ft 



as v/rth ^add>^5> 
You tar\ s\>c6'^y all 

sides mdc^dc 於七 b/ 

-to dvea 七 c mavjms 
like tW»s. 、 ^ 





Cowtcwt Area 


You even do^*tv-ol 
y/idrt^a 灼 dl m a 

vavic 切 d ^Y s, 〜代 ’ 
七 V>c avea has 

been made v^dc- 







f[y\d 

Kcvc 七 he 
doirrtch 七 
area is -tall 
but 七 hirv. 
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some details about boxes 



Dumb Quest! 


ons 


vJ I It seems like knowing this box 
stuff would be important if I were 
someone creating the software for a 
web browser, but how is this going to 
help me make better web pages? 


A ： 


To go beyond simple web pages 
that use the browser’s default layout, 
you need to be able to control how 
elements sit on the page, as well as the 
relative position of other elements. To do 
that, you alter various aspects of each 
element’s padding and margins. So to 
create interesting web page designs, 
you definitely need to know something 
about the box model. 

What’s the difference between 
padding and margin? They seem like 
the same thing. 

A- 

The margin provides space 
between your element and other 
elements, while padding gives you extra 
space around your content. If you have 
a visual border, the padding is on the 
inside of the border and the margin on 
the outside. Think of padding as part of 
the element, while the margin surrounds 
your element and buffers it from the 
things around it. 

vJ I I know they are all optional, but 
do you need to have padding to have 
a border or a margin? 


A ： 


No, they are all totally optional 
and don’t rely on each other. So you 
can have a border and no padding, ora 
margin and no border, and so on. 


vJ I I’m not sure I get how elements 
get laid out and how margins fit into 
that. 


A ： 


Hold that thought. While you’re 
going to see a little of how margins 
interact with other elements in this 
chapter, we'll get way into this topic 
in Chapter 11 when we talk about 
positioning. 

C^: So other than size, it sounds 
like I can’t really style padding and 
margins? 


A ： 


That’s basically right. Both are 
used to provide more visual space, and 
you can’t give the padding or margin a 
direct color or any kind of decoration. 

But because they are transparent, they 
will take on the color of any background 
colors or background images. One 
difference between padding and margins 
is that the element’s background color 
(or background image) will extend under 
the padding, but not the margin. You’ll 
see how this works in a bit. 

C^: Is the size of the content area 
determined solely by the size of the 
content in it? 


A ： 


Browsers use several rules to 
determine the width and height of the 
content area, and we’ll be looking at that 
more in-depth later. The short answer is 
that while the content is the primary way 
the size of an element is determined, 
you can set the width and height 
yourself if you need control over the size 
of the element. 
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the box model 


Meanwhile, back at the lounge... 

We do have our work cut out for us on the lounge page, so let’s get back to it. Did you notice 
the blue, stylized paragraph when you looked at the final version of the lounge page in the 
beginning of the chapter? This paragraph contains text with the lounge’s guarantee to their 
customers, and obviously they want to really highlight their promise. Let’s take a closer look 
at this paragraph, and then we’ll build it. 



Our guarantee: at the lounge f we're committed to 
providing you f our guest,, art ercepfEOPmf 
earperEertoe euery time you uisiL Whether you're 
just stopping by to on ema?? art 

or are here Jbran o ut-of-the-ordmary 
dinner f you'll find our know!edgeaNe service 
staff pay attentEon to euery detail. If you're not 
fiilly satisfied, have a Blueberry Bliss Elixir on us. 


TV^c ^av-ajv-a\>K V>as 3 
a^amavmc \>at\^yro^d- 


What's playing at the Lounge 


We're frequently asked about the music we play at the lounge, and no wonder, 
it's great stuff. Just for you, we keep a list here on the site, updated weekly. 
Pnjny. 


• Buddha Bar, Claude Challe 

• When it halls, Zero 7 

• Earth 7, L.T.J. Bukem 

• Le Roi Eat Mort, Vive Le Roif, Enigma 

• Music for Airports, Brian Eno 


G 2012, HcmJ Luuivuc 

Al tr«derr>«rks anxt registered trsdemarka appearing on this site ore th« property of their respecthr« ovwvers. 


The looks sc\ri-f, 
⑽ 七 sahs-sev-i-f^ ay\d 
its italid. 


detailed directions to get you here in record time. No reservations necessary; 


rnmH rind jniri us rinytimn. 


TKcvcsPvcv^ a 


^av-aya^K 


ville. Stop In 
bit Innypr 
of rasrp. 


ubicnt ond 
your dining 
sights 
ess to the 


/^o-tidc -the 

pavajraph looks 

•i^dcirtcd a bit 


9 you, our 
MuUhtr 
or are here 


TKc 七 wt is o^fsc 七 
■fvom bovdev- 


Thcvc’s a siylisk 

vagjcd-look'mg bovdev. 


But that's not oil; ot night, join us in the backroom as our resident DJ spins a 
choice selection of trance and drum&bass beats across our spacious tiki-themed 
dance floor. Or just hong out in one of our comfy white vinyl booths at the 
ddrice bdr. You Lan have your elixirs delivered from the main luunge right to 
rhp rlanrp floor. If ynu'vp hart pnough nf rhp hpar, Jusr hpari hark ro rhp Inungp 
area to relax. And, no matter where you find yourself in tfte lounge, you'll 
always be connected with our wireless internet access. 

Now that you've experienced the lounge virtually, isnt it time to check us out 
for reoR We're located right in the heart of Webvillc, and we've created some 


Weekly Elixir 

Specials 


Lemon Breeze 

The ultimate healthy drink, 
this elixir combines herbal 
botooicals, mirverals, and 
vitamins with o twist of 
lemon into a smooth citrus 
wonder that will keep your 
immune system going all day 
and all night. 


Chal Chiller 

Not your traditional chal, this 
elixir rnlxeb rridte with chdi 
spi chs nruJ Hflds nn nxtrri 
rhcx^lHtH kick fnr « 
raffpinarpri rasrp <;pn<iarinn 
on ice. 


Black Drain Drew 

Want to boost your memory? 
Try our Black Brain Brew 
elixir, made with block 
oolong tea and just a touch of 
espresso. Your brain will 
thank you for the boost. 

Join us any evening for these 
and all our other wonderful 

elixirs. 


R O O 


Head First Lounge 


C It I C 1 flle7//chapterl0/lounge/lounge.html 
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working through padding, borders, and margins 



^|harpen your penci 

See if VO 


if you can identify the padding, border, and margins of this paragraph. 
Mark all the padding and margins (left, right, top, and bottom): 


don’t forget, the lounge offers free wire[ess access to the 
Internet, so bring your [aptop. 

Our guarantee: ar the lounge, we're commined to 
providing you, our guest, with an exceptional 
experience every time you uisit. MetPier you're 
just stopping by to in on email over an 
elixir f or are here for an o ur-of- the-o rdinary 
dinner, you'll find our knowledgeable seruice 
stqffpay attention to euery detaiL If you're not 
JuUy satisfied f have a Blueberry Bliss lUixir onus. 

But that's nor all; at nighty jofn us fn the backroom as our 
resident DJ spms a choice sefection of trance and drumSibass 
beats across our spacious tiki-themed dance floor. Or just han 





Before going on to the next page, think about how you might 
use padding, borders, and margins to transform an ordinary 
paragraph into the “guarantee paragraph.” 
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the box model 


Crcatmg the guarantee style 

Let’s get started by making a few small changes to the style of the guarantee 
paragraph just to get a feel for how the paragraph’s box is set up. To do that, 
you’re going to add the paragraph to a class called guarantee so that you can 
create some custom styles for just this paragraph. You’re then going to add a 
border along with a little background color, which will let you see exactly how 
the paragraph is a box. Then we’ll get to work on the rest of the style. Here’s 
what you need to do: 


O Open your u lounge.htmr , file and locate the paragraph that starts 

''Our guarantee”. Add a class attribute ''guarantee” +o the element like this ： 

Add dass aiiv-ibuic v/rtii a value o-f w juav-a^*tcc - 
Remember, a dass W 山 allow you -to style i^is paraya 卟 
mdicfc^dic^ilY o-f oiiicv- ^avajv-apiis. 

Our guarantee : at the lounge, we're committed to providing 
you, our guest, with an exceptional experience every time you 
visit. Whether you're just stopping by to check in on email 
over an elixir, or are here for an out-of-the-ordinary dinner, 
you'11 find our knowledgeable service staff pay attention to every 
detail. If you're not fully satisfied, have a Blueberry Bliss 
Elixir on us. 

</p> 

❹ Save your 、、 lounge.html 〃 file and open the u lounge.css ,# file. YouVe going 
to add a border and background color to the guarantee paragraph. Add 
the following CSS to the bottom of your stylesheet and then save. 



• guarantee { 

border-color : 
border-width : 
border-style : 
background-color : 



The properties add a border *to a^y 

is m dass. So 

七 hat’s just 

WicVc making 七 lie dolov o-f 七 he bovdev bladk. 
… and one pixel 七 iiidk... 

...dhd solid. 


WicVc also 七 lie element 3 badkjvouhd dolov, v/KidK 

will Kelp you see tKc di-f-fcv-c^dc between 
mavg’ms, and make tKc guava 灼七 cc look good- 
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a first cut on paragraph styling 


A test drive of the paragraph border 吞色窮 

Reload the page in your browser, and you’ll now see the guarantee 
paragraph with an aquamarine background and a thin black border 
around it. Let’s examine this a little more closely … 

|七 docsh ； i look like tlic fav-a^v-afli has a^y 
padding avound tiic doh*tcn*t—*tlicvc is no 
spade between ilic a^d ilic bovdev. 




•“ Lou 


Xloi 




d First 

unge 


Welcome to the Head First Lounge 

,! *** **• •嫌 u ^ 

* . •_«、《mv “ imk« zm*tK^wu m 




! ««ltUK cTiaii 
'cUIrvry m«n 




^** r ■* ***• w« rrc*«rwv ttM t» m 

o«»y U ，《 味 • 糾 . i«« ，- «)wM 

r * ■ «r« v « c# OTd^> Sn^-, n. 


• *v» fw»t. * 

•'t l« < 


•«m«ar« » ^ 5 b«ta mm ltk> tfwmM 

^ "*•«* »••«« M tlw ter«* M . vm tM »«s« 

i» rw «*iim *" 


• r«M* 4 

»•»«*• li 


• «^ce »««oet>er y 
► Xana »wt In «rc »« 
h»v« r>j* duir» « 0 <v«rad fr»w fw <n», 
lf«* >j»t ^aad b«a u> ll« t%n«r « 


Weekly Elixir 


ir Special; 


•分 «««« C'Ml 4 « K 
* ••<••••»¥. «e*r*9 AIM p r 一 


*v«1l «lw«v«t« 19VWV.IM ： wrihv 
«r«y» 

tUiMI io 9«l r9M >wr« 


• to ch«ck V 

礴 fl»M i ■嘸 a 4 


the lounge and adding an extra cfmension to your dmfng experience. The decor surrounds you with 
the refaxfng sendments of sight/ from eras past. And, dont forget, the founge offers free wireless 
Esccess to the Internet f so brfng your fEsptop, 


Our guarantee: at the founge^ we r re com^lirted to provfdmg you, our guests wfth an exceptional 
experience every time you vfsiL Wh^Ter you Ye just stopping by to check m on emaN! over Esn 
elfxtr^ or are here for an oyt-of-th^ord i nary dinner, you'll find our knowledgeable service staff pay 
attention to every deraH, If you 1 , e nor fu^fy satisfied, have a Btueberry Bliss Elixir on us._ 


But thafs not al[; at nighty^ofn u^tn the backroom as our resident DJ spfns £s choree selection of 
trance and drumStb£sss b^ars across our spaefous riki-themed dance Hoor, Or just hang out m one rfif 



But thcv-c docs seem -to be a ov\ the h>y 

Sy\d bo*t*tom o( *tKc pav-agv-afK clcmcn-t. 


T^cvc is〆 七 a y\oii6cablc mavj'm bcWc^ 
i\\t Ic-f-t Br\d vijlvt edges Jc -tlic 
pavay— Br\d iiiC bv-o>wscv- >w'mdo>w edges. 


Here’s what the paragraph would look like if we drew it 
as a box model diagram: 


lA/cvc goi a 七 op ay\d bottom mav^m 



Our guarantee: at the lounge, we’re committed to providing you, our guest, with 
an exceptional experience every time you visit. Whether you’re just stopping by to 
check in on email over an elixir, or are here for an out-of-the-ordinary dinner, you’ll 
find our knowledgeable service staff pay attention to every detail. If you’re not fully 
satisfied have a Blueberry Bliss Elixir on us. 




Bui Ic-fi ar\d v-ijiii 

mavgms av-c vcv-y small. 


f[Y\d v/e i^ave a bovdev-, but its v-ijiii up aja'ms-t tiic 6 。的七⑶七 
means ilie padd'mj is sci vevy small, ov -tlicvc^s no paddmj ai all- 
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the box model 


Padding, border, and margins for the guarantee 

Now that you’ve seen how the padding, border, and margins are 
currently set on the guarantee paragraph, let’s think more about 
how we’d actually like them to look. 


dont forget, the lounge offers free wireless access to the 
Internet, so bring your laptop. 



\Mt dc-fmitcly y\ctd some padd'mj 
all around tKc 匕 ohtcivt. 


Our guarantee: at the lounge, we’re committed to 
providing you, our guest, with an exceptional 
experience every time you visit. Whether you're 
just stopping by to check in on email over an 
elixir, or are here for an out-of-the-ordinary 
dinner, you'll find our knowledgeable service 
staff pay attention to every detail. If you're not 
Jully satisfied, have a Blueberry Bliss Elixir on us. 


But that's not all; at night7join us in the backroom as our 
resident DJ spins a choicy selection of trance and drum&bass 
beats across our spacioYs tiki-themed dance floor. Or just hang 


also {p heed a 
sligK-tly di-f-fcirch-t bovdev-. 
TKis bov-dev- looks \ra^ed> 
i^oi like a solid l*me. 


f{Y\d >wc >wa 灼七 some move mavgm 

sf>ade a\rou^d tKc pav-agv-a^K. 



Adding some padding 

Let’s start with the padding. CSS has a padding property that you can 
use to set the same padding for all four sides of the content. You can 
set this property either to a number of pixels or a percentage. We’ll use 
pixels and set the padding to 25 pixels. 

.guarantee { 

border-color : black; 

border-width : lpx; 

border-style : solid; 

background-color : #a7cece; 
padding : 25px; 


Wve adding Uy pixels o( paddihj 
*to all sides o( dojrterrt ("top, 

bottom, 如 d Ic-fi). 
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testing the padding 


A test drive with some padding 


When you reload the page in your browser, you’ll notice the text 
in the guarantee paragraph has a little more breathing room 
on the sides now. There’s some space between the text and the 
border, and it’s much easier to read. 


|n/o>w you see 2-^ ^i%cls o-f spade 七 1 化 

cdjc o-f tiic a^d the bovdev-. 



Notidc tKc badkgv-ouirvdi 
dolov is Uhdcv bo*tK doirvtcirrt 
airvd Bu 七 1 七 (iocsir / 七 

\Y\bo 七 he mav-g*m. 


the refEsxmg sentiments of sights from erE3s\a£ssL And, dont forget^ the fo> nge offers free wtrefess 
access to the Internet, so bring your fa prop 


Our guarantee: at the founge^ we're committed to provfdfng you^ our guests with an 
exceptional experience every time you visit. Whether you're just stopping by to check m on 
emafl over an eliixrr, or are here for an out-of-the-ordmary dmner^ youlf find our 
¥nowfedge£sble service staff pay attention to every detail. If youYe not fully satisfied, have a 
Bfueberry Bliss Elixir on us. . 


Bur that r s not aEE; at night, join us m the backroom as our resident DJ spins a chofce sefection of 
trance and drum&.bass beats across our spacious tiki-themed dance floor. Or just hang out in one of 


Now let's add some margin 

Margins are easy to add using CSS. Like padding, you can 
specify the margin as a percentage or in pixels. You’re going to 
add a 30-pixel margin around the entire guarantee paragraph. 
Here’s how you do that: 


• guarantee { 


border-color : 

black; 

border-width : 

lpx; 

border-style : 

solid; 

background-color : 

#a7cece; 

padding : 

25px; 

margin : 

30px; 


^ adding °>0 pixels o-f mav-g'm -to all sides o( 
dohtchi f-tof； right bo-t-tom, a^d Ic-ft). 
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the box model 


A test drive with the margin 

When you reload the lounge page, you’ll see the paragraph is really beginning to 
stand out on the page. With the margins in place, the paragraph looks inset from 
the rest of the text, and that, combined with the background color, makes it look 
more like a “callout” than an ordinary paragraph. As you can see, with only a few 
lines of CSS, you’re doing some powerful things. 


Now we have 10 fi%ds o( mav-jih on all sides. 


the relaxing sentiments ofsightsWor^y eras past 
access to the Internet, so brino< uur laptop. 



Our guarantee: at the lounge, we're commStted to provk 
exceptional experfence every time you Whether yc 

check m on emafl over an or are here for Esn out- 

fmd our knowledgsEsble service staff pisy attention to ev 
satisfied,, have a Blueberry Bliss Elixir on us. 



fng you, our guest, wfth an 
uYe just stopping by to 
)f-the-ordmary dmner, youll 
3ry detail. If youYe not fully 


But that r s not all; at nighty join us in the backroom as our resident DJ spins a choice selection of 
trance and drumSibass beats across our spacious tikt-themed dance floor. Or just hang out fn one of 



If you look at the guarantee paragraph as it’s supposed to look in its final form, 
it has an italic, serif font, a line height greater than the rest of the page, and (if 
you’re looking really close) gray text. Write the CSS below to set the line height 
to 1.9em, the font style to italic, the color to #444444, and the font family to 
Georgia, “Times New Roman”, Times, serif. Check your CSS with the answers 
in the back of the chapter, then type it in and test. 
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background images 


Adding a background image 

You’re almost there. What’s left? We still need to get the white “guarantee star” 
graphic into the paragraph and work on the border, which is a solid, black line. 
Let’s tackle the image first. 

If you look in the “chapter9/lounge/images” folder, you’ll find a GIF image called 
“background.gif” that looks like this: 



This image is a si 叶 le stav-like 
paitev-n m wliitc a 

badkjv-ound. Moiidc 
that it also has a matte av-ound 
it that ma-tdhes ihc dolov of 

the badkyound. 


Now you just need to get that image into your paragraph element, so you’ll 
be using an <img> element, right? Not so fast. If you’re adding an image to 
the background of an element, there is another way. Using CSS, you can add 
a background image to any element using the background-image property. 


Let’s give it a try and see how it works: 

.guarantee { 


ttcv-c arc poetics you added 
m ttc previous ?ay- 


line-height: 

1.9em; 

font-style : 

italic; 

font-family : 

Georgia, "Times New Roman ”， 

color : 

#444444; 

border-color : 

black; 

border-width : 

lpx; 

border-style : 

solid; 

background-color : 

#a7cece; 

padding : 

25px; 

margin : 

30px; 

background-image : 

url(images/background.gif); 


Times, serif; 





Add *tliis io youv- CSS, save, and veload youv- page. 
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the box model 



Wait a sec, it seems 
like we have two ways 
to put images on a page. Is 
background-image a replacement 
for the <img> element? 


No, the background-image property has 
a very specific purpose, which is to set the 
background image of an element. It isn’t 
for placing images in a page — for that, you 
definitely want to use the <img> element. 


Think about it this way: a background image 
is pure presentation, and the only reason you 
would use a background-image property is 
to improve the attractiveness of your element. 
An <img> element, on the other hand, is used 
to include an image that has a more substantial 
role in the page, like a photo or a logo. 

Now, we could have just placed the image 
inside the paragraph, and we could probably 
get the same look and feel, but the guarantee 
star is pure decoration — it has no real meaning 
on the page, and it’s only meant to make the 
element look better. So, background-image 
makes more sense. 
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more about the background-image property 


Test driving the background image 


Well, this is certainly an interesting test drive — we have 




Tip C]^S6 


The background-image property places an image in the background 
of an element. Two other properties also affect the background image: 
background-position and background-repeat. 


background-image: url(images/background.gif); 



TKc bddk0\rour\di—pv*o|>cv*ty is se 七 
a URL, whidli daw be a \rda*tivc 
o\r a -full-blown URL (Ivttp://...). 



ir»o quotes avc 

y-gcyAlVcd 3VOUir»d 
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the box model 


Fixing the background image 


By default, background images are repeated. Luckily, there is a no-repeat value 
for the background-repeat property. Also, by default, browsers position a 
background image in the top left of the element, which is where we want it, but 
let’s also add a background-position property just to give it a try. 


.guarantee { 

line-height: 
font-style : 
font-family : 
color : 

border-color : 
border-width : 
border-style : 
background-color : 
padding : 
margin : 


Times New Roman", Times, serif; 


background-image : 
background-repeat : 
background-position : top left; 


1.9em; 
italic; 

Georgia, 

#444444; 
black; 
lpx; 
solid; 

#a7cece; 

25px; 

30px; 

url(images/background.gif); 
no-repeat; 





^ You’ve jo*t *bwo now 
pv-opc\rtics {jo add 


IVc warv 七七 he 

f{Y\d y/c wa 灼七 i 七 in J badkgvound imaj 

七 he *to^—do\nr\C\r. ^ ― *to hot 




The background-position property sets the position of the image and can be specified in pixels, 
or as a percentage, or by using keywords like top, left, right, bottom, and center. 


background-position : top left; 


Plates image m -top Ic-fi o-f i\\t 

Thc\rc many diWcv-cirrl ： y/ays -bo position 七 Vrngs m and 
well be 七 alkmg abou 七七 ha 七 m *bwo 


By default, a background image is "tiled," or repeated over and over to fill the background space. 
The background-repeat property controls how this tiling behaves. 

o*tKcv" badkjvouhd—V'cpcdt values you use- 


background-repeat : repeat; 



Sets tKc imajc bo vcpcat botK 
Kovi^on-tally ahd vcvtidally. This is Ac 
dc-fault bcKaviov. 


no-repeat 
repeat-x 
repeat-y 
inherit 


/^^ Display *tKc imay ot\tt) do^i 



vc^cat image a*t all. 

Repeat iiic image oy\ly Kovizo^-tally- 

Repeat ilic image o^ly vcv-tidally. 


Oust do y/haicvcv iKc favchi clcmc^i does. 
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getting more sophisticated with padding 


Another test drive of the background image 吞色 衰 


Here we go again. This time, it looks like we’re much 
closer to what we want. But since this is a background 
image, the text can sit on top of it. How do we fix 
this? That’s exactly what padding is for! Padding 
allows you to add visual space around the content 
area. Let’s increase the padding on the left and see if 
we can nail this down once and for all. 


This is mudli /Vow 

"tlic iw»agc isn’t v-cfcaicd- 


H 


Head First lounge 


: ///chapt«r 9 /lounge/lounq«.himl 


But vcally like ^ 

七 he Y^oi {p ovcv 

*tof o*f imay. 


n 


- ^9 


First 口 c 


Welcome to the Head First Lounge 


Thr Hc*.td Rrst Lounge is, no doubt, thr biggr^t trc*ndra*ttnr in Wrbvillc*. Stop In to sample? thn cdiHrtic offering af 
elixirs, teas, and coffees, or, scav a bit longer aryj enjoy the mulciculcural cuHnary menu that combines a 
harmony of taste, texture, aod color v¥iCh the best in frssh arvd healthy ingredients. 

During your %t.iy *it the laung«? r you'll i*njoy ( i smooth mixturn af «imbinnt and mystic %oundr‘ r filling the; loung«? 
and adding an extra dimension to your dining experience. The decor surrounds you with th« relaxing sentiments 
of sights from eras past. And, doot forget, the lounge offers free wireless access to the Internet, so bring your 
laptop. 


Our guarantee: at 


qf-Ihr-nnHnary dinner, 

/idlysatisfied havea 


weYe committed 



to providing you. our guest, with 
inybytn cfuvk in tm email uver tu 
k/ixth/c avrtjict staff puy altmthw 


with cm exceptional experience 
» Hixir, or arr hrrvjortm ttut- 
tn cvny drUril. IJytiu'rr. not 


But not all; at night, join us in the iMckroam <ss our resident D 】 spin*. «s chaia* »i*lc*ction of tranci* <ind 

drum8J>ass b«acs across our spacious tlkl-themcd dance floor. Or just hang out in one of our comfy white vinyl 
booths at the darvee b«r. You can have your elixirs delivered from the main loonge riQht to the dance floor. If 
you've r>ad enough of the b«at, just head back to the 10^090 area to relax. And, 00 matter where you find 
yourr “， ir in thn loungi*, you'll b«’ roon(*cti*d with our wiri?lir*i% InU ， rn«，t dccir*» ； i. 

Now that you've experienced the lounge virtually, isn't It dme to check us out for reaP We.re located right in the 
heart of Wot^ville, and we'v« created some detailed directions to get you har« in record tim«. No reservations 
ncccwjry; come and join uu dnytime. 


How do you add padding only on the left? 

For padding, margins, and even borders, CSS has a property for every 
direction: top, right, bottom, and left. To add padding on the left side, 
use the padding-left property, like this: 


• guarantee { 

line-height: 
font-style : 
font-family: 
color : 


1.9em; 
italic; 

Georgia, "Times New Roman", Times, serif; 
#444444; 


border-color : 
border-width : 
border-style : 
background-color : 
padding : 
padding-left : 
margin : 

background-image : 
background-repeat : 
background-position : 


black; 
lpx; 
solid; 

#a7cece; 

25px; 

80px; 

30px; 

url(images/background.gif); 
no-repeat 
top left; 


WcVc usmj tKc padding - led pyoyrt/ *to 
mdv-casc iV>c paddi'mj on -tV^c le*f 七 ” 

t^a-t WC -fi\rs-t set paddihj oh all sides 
左 〆^ "to pixels, a^d tliCh wc spedi-fy a pvopev-ty -fov 
■Uie Ic-f-t side- 



Ov"diev" makers Kcv-c—i-f you swi-tdK ov-diev-, ⑶ youll 
set 七 he padd'mj -fov- 七 he lc*f 七 side *fi\rs 七，七 lieh 七 “e 
gchcv-al faddmj p\ropcv-ty will set all sides badk -to 
fi^cls, mdlud'mg 七 he le*f 七 side/ 
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the box model 


Are we there yet? 

Make sure you save your changes and reload the 
page. You should see more padding on the left side 
of the paragraph, and the text is now positioned 
well with respect to the guarantee star. This is a 
great example of where you use padding instead 
of margins. If you need more visual space around 
the content area itself, use padding, as opposed to if 
you want space between elements or the sides of the 
page, in which case, use margin. In fact, we could 
actually use a little more margin on the right side to 
set the paragraph off even more. Let’s do that, and 
then all we need to do is fix the border. 



\ Wc 6 ould mdvease 

^ ddi "9 looks \ 

-the -text is wdl \ y.ON, -to tWis a VAttc 

positioned with I w ovc a ^allo^ look 

the wc still need 0 y\ ^ ? a y. 

a bettev bovdev-. 


How do you increase the margin just ow the right? 


You do this just like you did with the padding: add another property, 
margin-right, to increase the right margin. 



.guarantee { 

line-height: 
font-style : 
font-family: 
color : 

border-color : 
border-width : 
border-style : 
background-color : 
padding : 
padding-left : 
margin : 
margin-right : 
background-image : 


i\\t pattem? The 代 、 a 

-to doy\iv-ol all sides -tojciiicv-, 

-fov cad.ii side i-f you v/avrt 
■to sc*t 七^你 rndWidually- 


background-repeat : 
background-position : top left; 


1.9em; 
italic; 

Georgia, "Times New Roman ”， Times, serif; 

#444444; 
black; 
lpx; 
solid; 

#a7cece; 

25px; 

80px; 

30px; f[Y\d y\o>/ y/cVc jo'mj "to ovevvide ilia 七 sc-ttmj -fov iKc vi# 七 

250px; sidk, a 朽 d srt rt *fco V^O 卜 els. 

url(images/background.gif); 
no-repeat; 



Rcmcmbcv, >wcVe alv-cady settmj 

tKc mav-g'rns {p be ZO pixels. 


Add the new margin-right property and reload. Now the 
paragraph should have 250 pixels of margin on the right side. 


IliiiiiliiHiiliiiiiiViiiiiiiiiiiliiPI 


Laptop. 


(Airpuaronr—: orrZ 
our guest, with an c 
Whriher ifou'rrjxat 
ttixir.or an Imwfaran out-cf>tf»^int(mny dTw 
our Jbiou*iM^eob4c tteff poy <tf r<nfion f o 

Vciu'rr notfiJlu uttitfird. ktLva Oharberry Btiss t 


d to providing 
rytitne^ouvisi\ 


arth0 Imrngf. u^Ygco 

fxctptional expthtnet tvtry titne you iftfir. 
Hopping by to dteckinon emmV avtran 
youVflnd 
to tvery detail. If 


VoO pixels 
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overview of borders 


A two-miwutG guide to borders 

There’s only one thing left to do to perfect the guarantee paragraph: 
add a better border. Before you do, take a look at all the different ways 
you can control the border of an element. 


Border Style 


The border-style property controls the visual style of the border. There are eight 
border styles available, from a solid line to dotted lines to ridges and grooves. 


border-style : groove; 


Tlic solid style is 
jus-t y/lia*t it sounds 
like ： a solid bovdev-. 


TKc double siylc 
uses *bwo lines. 


h gv-oovc siylc 
looks like a gvoovc 

•m tKc 

"to see 

in d book). 


TV ouisci siylc looks 
like am ouisci iiiai 
V-iscs -fvom 七 


To spedi-fy a bov-dev- siylc, jus 七 use tKc 

^ - ’ bovdev 一 style pv-opevty anj a value o-f or»c 

of 七 lie available styles. 





Go with me; I’ve 
been better since 

the outset. 



丁 lie dotted 
style looks like 
a scv-ics of dois. 

f[y\d 

s-tylc is just a 
sci o( ddsiics 
around *bV>c 
bov-dev-. 

The inse 七 style 
looks like an msc 七 * — ^ 
七 lia 七 sinks irrto 
iKc page- 


TKc vidge style 

looks like d v*3iscd 
v-idjc oy \ tKc pay. 




Once you go 
dotted, you’ll 
never go back. 


I Ignore dotted; 

! use dashed. 


I’m the only 
: in’’ style: 

inset. 


I’m more fun; 
I’ve got ridges. 
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the box model 


You Widths us'mj kcywovds 七 iVm, 

medium, ov- tKitk, o\r by tKc ⑽你 be\r o*f 卜 els. 


border-width : thin; 
border-width : 5px; 


The border-width property controls 
the width of the border. You can use 
keywords or pixels to specify the width 



Border Width 


Border Color 


The border-color property sets the color 
of the border. This works just like setting 
font colors; you can use color names, rgb 
values, or hex codes to specify color. 


border-color: red; 
border-color : rgb(100%, 0%, 0%) 
border-color : #ff0000; 


Use bov-dev*—dolov 
■to spe^i-fy toW 
o( a bov-dev-. You 
use a^y o( iKc 
dommoh ways *to 
sfeti-fy dolov. 








Specif/mg Border Sides 


I border-top-color | 

I border-top-style | 

border-top-width | 

^lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllillllllF 


^iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiimimiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 

I border-right-color 
I border-right-style 
I border-right-width 

^niiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiMiiiii 



Just as with margins and padding, 
you can specify border style, width, 
or color on any side (top, right, 
bottom, or left): 


border-top-color : black; 
border-top-style : dashed; 

border-top-width : thick; 

TKcsc pyo^cvtics avc -rov 七 lie top bo\rdcv- 
Ohly. You 63m S^cdi-fy cadK side of tKc 
bovdev- 


• m — m 

M 41 
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Specifying Border Comers 


You can create rounded corners on all four corners, 
or just one corner, or any combination. 

You ddn all -fouv dovncvs one r\umbcv , . 

border-radius : 15px; ^ 


4 —一 


Oy you dan spedi-fy eadK dovir\c\r 
separately- Mohec tKat you dan use 
^Y% ov cm -to spedi-fy tKc radius siz-c- 


border-top-left-radius : 3em; 
border-top-right-radius : 3em; 
border-bottom-right-radius : 3em 
border-bottom-left-radius : 3em; 


l 


l*f you use cm, iKc mcasuvcmchi o( 
the bovdev- vadius is v-claiivc -to -the 
•foirt si« o( iKc clcmchi just like 
v/liCh you use cm -fov* *foirt 一 si 乙 c. 




border-top-left-radius : 15px; 
border-top-right-radius : Opx; 
border-bottom-right-radius : Opx 
border-bottom-left-radius : 15px 


You ddn yt all kinds o( 
sKafes usmg bovdicv--v-adius. 
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Pordcr fit and finish 

It’s time to finish off the guarantee paragraph. All we need to do is give 
it a ragged-looking border. But which style is that? The available styles 
are solid, double, dotted, dashed, groove, ridge, inset, and outset. So how 
do we make it look ragged? It’s actually just a trick: we’re using a dashed 
border that has its color set to white (matching the background color of the 
page). Here’s how you do it. Begin by just making the border dashed. Find 
the border-style property in your “lounge.css” and change it, like this: 


border-style : dashed; 


ttcvc >wc’vc dKanjcd 
bovdcv -fvom solid 
io dasKedi- 


Go ahead and save the file and reload. You should see a border like this: 


Now, to get a ragged-looking border, just set the color of the border 
to white. This makes the border look like it is cutting into the 
background color. Give it a try: find the border-color property 
and set it to white. 





Browsers don't always agree on 
the size of thin, medium, and thick. 

Browsers can have different default 
sizes for the keywords thin, medium, and 
thick, so if the size of your border is really 
important to you, consider using pixel sizes instead. 


Watch it! 


you are here ► 


389 










testing fancy borders 
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Head First Lounge 

^ ► 1 

c 

0 file:///chapter9/lounge/lounge.html O 







^ Head First 


丄 iounge 


Welcome to the Head First Lounge 


The Head First Lounge is, no doubt, the biggest trendsetter in Webville. Stop in to sample the eclectic offering of 
elixirs, teas, and coffees, or, stay a bit longer and enjoy the multicultural culinary menu that combines a 
harmony of taste, texture, and color with the best in fresh and healthy ingredients. 

During your stay at the lounge, you'll enjoy a smooth mixture of ambient and mystic sounds, filling the lounge 
and adding an extra dimension to your dining experience. The decor surrounds you with the relaxing sentiments 
of sights from eras past. And, don't forget, the lounge offers free wireless access to the Internet, so bring your 
laptop. 


Our guarantee: at the lounge, we're committed to providing you, 
our guest, with an exceptional experience every time you visit. 
Whether you're just stopping by to check in on email over an 
elixir, or are here for an out-of-the-ordinary dinner, you'll find 
our knowledgeable service stoffpay attention to every detail. If 
you're not fully satisfied, have a Blueberry Bliss Elixir on us. 


But that's not all; at night, join us in the backroom as our resident 
drum&bass beats across our spacious tiki-themed dance floor. Or 
booths at the dance bar. You can have your elixirs delivered from/ 
you’ve had enough of the beat, just head back to the lounge area 
yourself in the lounge, you’ll always be connected with our wireless 

Now that you’ve experienced the lounge virtually, isn't it time to check ul 


Nice! I caiVt wait to see 
the entire page remodeled. 
Take a break and have an 
iced chai on me! 


Congratulations! 



Bravo! You’ve taken an ordinary HTML 
paragraph and transformed it into something 
a lot more appealing and stylish using only 15 
lines of CSS. 

It was a long trip getting here, so at this point 
we encourage you to take a little break. Grab 
yourself an iced chai and take a little time to 
let things sink in — when you come back, we’ll 
nail down a few more of the fine points of CSS. 
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While you’re drinking that iced chai, try your hand at adding a border-radius to the guarantee paragraph 
We’ve got some examples below of the guarantee paragraph with a variety of border-radius values set. 
Write the CSS to create the border you see in the example. For each example, we’ve provided the size 
of the border-radius used to create the rounded corners in that example. 




Our guarantee: at the lounge, we're committed to 
providing you, our yucst, with an cxtx^tinnal cxpcriimcc 
every time you visit Whether you're just stopping by to 
check in on email over an elixir, or are here for an out~of~ 
the-ordinary dinner, you’ll find our knowledgeable 
service staff pay attention to every detail If you’re not 
fully satisfied, have a Blueberry Bliss Elixir on us. 


youv- CSS 


午 0?% 




Our guarantee: at the lounge, we're committed to 
providing you, our guest, with an exceptional experience 
every time you visit Whether yoi/re just stopping by to 
check in on email over an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our knowledgeable 
service staffpay attention to every detail. If you're not 
fully satisfied, have a Rluchinry Bliss Klixir on us. 


午 0?% 


Our guarantee: at the lounge, we’re committed to 
providing you, our guest, with an exceptional experience 
every time you visit. Whether you’re just stopping hy to 
check in on email over an elixir, or are here for an out-of- 
thc-ordinary dinner, you7 /find aur knnwlodycablc 
service staffpay attention to every detail. If you're not 
fully satisfied, have a Blueberry Bliss Elixir on us. 


2-CWV 

Our guarantee: at the lounge ， we're committed to 
L providing you, our guest, with an exceptional experience 

every time you visit. Whether you*re just stopping by to 
check in on email over an elixir, or are here for an out-of- 
the-ordinary dinner, youllfind our knowledgeable 
service staff pay attention to every detail. If you’re not 
fully satisfied, have a Rlucbcrry Bliss Elixir on us. 
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when to use c/asses 


Welcome back, and good timing. WcYe just about to listen 
iw on an interview with a class... 




This week’s interview: 

Are classes always right? 


Head First： Hey, Glass; you know we’ve been making good use of you, but we 
still don’t know a lot about you. 

Class： Well, there’s not all that much to know. If you want to create a “group, ’ 
so to speak, that you can style, just come up with a class, put your elements in it, 
and then you can style all the elements in that class together. 

Head First： So the class lets you take sets of elements and apply one or more 
style properties to them? 

Class： Exactly. Say you have some holiday-themed areas in your page — one 
Halloween, one Christmas. You could add all Halloween elements to the 
halloween class and all Christmas elements to the Christmas class. Then you 
can style those elements independently — say, orange for Halloween and red for 
Christmas — by writing rules that apply to each class. 

Head First： That makes a lot of sense. We just saw a good example of that in 
this chapter, didn’t we? 

Class： I’m not sure; I was off working. You’ll have to catch me up. 

Head First: Well, we have a paragraph on the Head First Lounge page that 
contains a written guarantee from the owners, and they want this paragraph to 
stand out independently of the other paragraphs. 

Class： So far, so good.. .but let me ask you this: are there a few of these 
paragraphs, or just the one? 

Head First： Well, I don’t think there is any reason to have multiple guarantee 
paragraphs, and I don’t see the same style being applied anywhere else in the 
page, so just the one. 

Class： Hmmm, I don’t like the sound of that. You see, classes are meant to be 
used for styles that you want to reuse with multiple elements. If you’ve got one 
unique element that you need styled, that’s not really what classes are for. 

Head First： Wait a second — a class seemed to work perfectly.. .how can this be 
wrong? 

Class： Whoa, now ， don’t freak out. All you need to do is switch your class 
attribute to an id attribute. It will only take you a minute. 
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Head First： An id attribute? I thought those were for those link destinations, like 
in Chapter 4? 

Class： ids have lots of uses. They’re really just unique identifiers for elements. 

Head First： Gan you tell us a little more about id attributes? This is all news to 
me. I mean, I just went through an entire chapter using class incorrectly! 

Class： Hey, no worries; it’s a common mistake. Basically, all you need to know 
is that you use a class when you might want to use a style with more than one 
element. And if what you need to style is unique and there’s only one on your 
page, then use an id. The id attribute is strictly for naming unique elements. 

Head First: Okay, I think I Ve got it, but why does it really matter? I mean, class 
worked just fine for us. 

Class： Because there are some things you really want only one of on your page. 

The guarantee paragraph you mentioned is one example, but there are better 
examples, like the header or footer on your page, or a navigation bar. You’re not 
going to have two of those on a page. Of course, you can use a class for just one 
element, but someone else could come along and add another element to the 
class, and then your element won’t have a unique style anymore. It also becomes 
important when you are positioning HTML elements, which is something you 
haven’t gotten to yet. 

Head First： Well, okay, Glass. This conversation has certainly been educational 
for us. It sounds like we definitely need to convert that paragraph from a class to 
an id. Thanks again for joining us. 

Class： Any time, Head First! 



Choose whether you’d use class or id for the following elements: 


id class 

□ □ 


A paragraph containing the footer 
of a page. 


id class 

□ □ 


A set of <p> elements 
containing movie reviews. 


□ □ 


A set of headings and paragraphs 
that contain company biographies. 


□ □ 


An <ol> element containing 
your to-do list. 


□ □ 


An <img> element containing a 
“picture of the day.” 


<q> elements containing 
Buckaroo Banzai quotes. 


■pi 6u!sn joj. sa^epipueo ;B8 j6 
8 JB ； SI| op -01 8L1 ； pue ‘Aep 81)1 ajlipid 8 Lli l J8 ； 00J. 8L|1 : J 8 MSUV 
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The id attribute 


Because you’ve already used ids on <a> elements, and because you already know how 
to use a class attribute, you’re not going to have to learn much to use the id attribute. 
Say you have a footer on your page. There’s usually only one footer on any page, so that 
sounds like the perfect candidate for an id. Here’s how you’d add the identifier footer to 
a paragraph that contains the footer text: 


Similar -b a dlass ； jus-t add 
atthbuC 孙 d tKoosc a 

灼 awe. 


Unlike a dlass, you dan o^ly 
Kave dcmchi m youv 

a 灼 id d w -foo*tcv , 



<p id= n footer M >Please steal this page, it isn't copyrighted in any way</p> 



Bsch clcmch-t tdv\ 
Ohly ohC id- 



)v/o spates ov special tKav-aticvs 
av-c allowed m id ^a^cs. 


Giving an element an id is similar to adding an element to a class. The only differences are 
that the attribute is called id, not class; an element can’t have multiple ids; and you can’t 
have more than one element on a page with the same id. 


tliereiare no o 

Dumb Questions 


What’s the big deal? Why do I need an id just 
to prove something is unique on the page? I could 
use a class exactly the same way, right? 

Well, you can always “simulate” a unique id with 
a class, but there are many reasons not to. Say you’re 
working on a web project with a team of people. One 
of your teammates is going to look at a class and think 
it can be reused with other elements. If, on the other 
hand, she sees an id, then she’s going to know that’s 
for a unique element. There are a couple of other 
reasons ids are important that you won’t see for a few 
chapters. For instance, when you start positioning 
elements on a page, you’ll need each element you 
want to position to have a unique id. 


Can an element have an id and also belong 
to a class? 

Yes, it can. Think about it this way: an id is just 
a unique identifier for an element, but that doesn’t 
prevent it from belonging to one or more classes (just 
like having a unique name doesn’t prevent you from 
joining one or more clubs). 
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Put how do I use id m CSS? 

You select an element with an id almost exactly like you select an element with a 
class. To quickly review: if you have a class called specials, there are a couple 
of ways you can select elements using this class. You could select just certain 
elements in the class, like this: 


p.specials { 

color : red 


TKis sclcdts o^ly pav-ajv-a^Ks -tKat av-c m iKc s^dials dass. 


Or you can select all the elements that belong to the specials class, like this: 


• specials 




color : red; 



TKis sclcdts all clcmcrrts m tKc spcdials dlass. 


Using an id selector is very similar. To select an element by its id, you use a # (hash mark) 
character in front of the id (compare this to class, where you use a . [dot] in front of the 
class name). Say you want to select any element with the id footer: 


#footer { 

color : red 



TKis sclcd-ts ahydcmchi iKat Kas tKc id w *foo 七 C. 


Or you could select only a <p> element with the id footer, like this: 


p#footer { 

color : red 


TKis sclcdis a <y> clcmcni i-f ii Kas -tKc id w -footcv- w . 


The other difference between class and id is that an id selector should match 
only one element in a page. 
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Using an id m the lounge 


Our guarantee paragraph really should have an id since it’s 
intended to be used just once in the page. While we should have 
designed it that way from the beginning, making the change is 
going to be quite simple. 


Step owe: Change the class attribute to an id iw your "lounge.html" file 


r Jus*t the ^lass 

*to By\ id. 

<p id= n guarantee n > 

Our guarantee : at the lounge , we're committed to providing 

you, our guest, with an exceptional experience every time you 

visit. Whether you're just stopping by to check in on email 

over an elixir, or are here for an out-of-the-ordinary dinner, 

you * 11 find our knowledgeable service staff pay attention to every 

detail. If you're not fully satisfied, have a Blueberry Bliss Elixir 

on us . 


</p> 


Step two: Change the ".guarantee" class selector iw "louwgc.css" to aw id selector 



#guarantee { 


line-height: 
font-style : 
font-family: 
color : 

border-color : 
border-width : 
border-style : 
background-color : 
padding : 
padding-left : 
margin : 
margin-right : 
background-image : 
background-repeat : 
background-position : 


1.9em; 
italic; 

Georgia, "Times New Roman ”， Times, serif; 

#444444; 

white; 

lpx; 

dashed; 

#a7cece; 

25px; 

80px; 

30px; 

250px; 

url(images/background.gif); 
no-repeat; 
top left; 
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Step three: Save your changes and reload the page 吞 


Wlcll, cvcv-yihmj should look 
B^(/\CTL-Y ， "the s^rwC- Bu*t doy /七 
you -feel mudh better* how ihai 
cvc^yihmj is as ii should be? 



000 

I ^ HI c 


Hf»ad First Inungp 

， t . n:_iourc?no ， qe‘mmi 


O 


n 


Head First 


丄 tounge 


Welcome to the Head First Lounge 


The Head First Lounge is, no doubt, the biggest trendsetter in wcbvillc. Stop in to sample the eclectic offering of 
elixirs, teds, arid coffees, or, stdy d bit longer dnd enjoy the multiculturdl culindry menu that combines d 
harmony of taste, texture, and color with the best m fresh and heaitny ingredients. 

During your bldy dt lh« luunyu, you'll unjuy d bmuuth mixture uf dmbiurit dnd mybtic buundb, filling th« luuriyu 
and Adding An extra dimpnnion to ynur dining TKp riftror fturround^ you with th<» relaxing ^pntimenM 

of sights from cros past. And, don't forget, the lourvgc offers free wireless access co the Internet, so bring your 
laptop. 


Our gunrantep.: at the Intmge, we're enmmitted tn protriding yeni, 
our yuast, with an exct/pliunul experittrux every lime you visit. 
Whether yourejust stopping by to check in on email outran 
elixir, or are here for an out-of-the^rdinary dinner, you'll find 
our knowledgeable service sioff pay attention to every detail. If 
you're, nntptlhj %ntinped, hfwen Rltteherry RliM Flirir on im. 


But thdt'b not dll; dt night, join us in the bdekruum ds our resident DJ spins d choice selection of trance dnd 
drumfthfts 今 arrows nur tiki-thftmed danr<* floor. Or just hAng nut in on^ of Aur romfy whitp vinyl 

booths at the dance bar. you can have your elixirs delivered from the main lounge right to ttie dance floor. If 
you*vp hnd enough of the bpat # just head hark to the Inungp fir^a to rHax. And, no matter whftre you find 
yourself in the lounge, you'll always be connected with our wireless Internet access. 

Now that you've experienced the lounge virtually, isnt it time to check us out for real? We're located right In the 


ihereicixe no ^ 

Dumb Questions 


So why did you make the selector #guarantee rather 
than p#guarantee? 

J\l We could have done either, and they both would select 
the same thing. On this page, we know that we will always 
have a paragraph assigned to the id, so it doesn’t really matter 
(and #guarantee is simpler). However, on a more complex set 
of pages, you might have some pages where the unique id is 
assigned to, say, a paragraph, and on others it’s assigned to a 
list or block quote. So you might want several rules for the id, like 
p#someid, and blockquote#someid, depending on which kind of 
element is on the page. 

Should I always start with a class, and then change it 
to an id when I know it’s going to be unique? 


No. You’ll often know when you design your pages if an 
element is going to be unique or not. We only did things this way 
in the chapter because, well, you didn’t know about id when we 
started. But don’t you think we tied id into the story rather nicely? 

© 

What are the rules for class and id names? 

Class names should begin with a letter, but id names can 
start with a number ora letter. Both id and class names can 
contain letters and numbers as well as the _ character, but no 
spaces. So “numberl” works, as does “main_content”，but not 
“header content”. Just remember, ids must be unique! 
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Remixing stylGshcets 

Before we wind this chapter down, let’s have a little fun 
remixing some stylesheets. So far, you’ve been using only 
one stylesheet. Well, who ever said you can’t use more than 
one stylesheet? You can specify a whole set of stylesheets to 
be used with any HTML. But you may be wondering why 
anyone would want to. There are a couple of good reasons. 
Here’s the first one... 



Imagine that the Head First Lounge takes off, gets 
franchised, does the IPO, and so on (all thanks to you and 
your terrific web work, of course). Then there would be 
a whole corporate website with hundreds of pages, and 
obviously you’d want to style those pages with external 
CSS stylesheets. There would be various company 
divisions, and they might want to tweak the styles in 
individual ways. And the lounge franchises also might want 
some control over style. Here’s how that might look: 


We use all 

the corporate colors 
and fonts, but we add in a few 
special touches of our own, like a 
different line height. 


O 


Weve set up all the main 
styles to be used by the 
company websites—fonts, 
colors, and so on. 


O 


o 




Beverage 

Division 


Weve got a young, hip 
clientele. We tweak the 
colors a bit and add a little 
edge, but overall we use the 
division^ main styles. 


Q 



Corporate Seattle Lounge 

(part of the Beverage 
Division) 
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Using multiple stylesheets 


So how do you start with a corporate style and then allow the division and 
the lounge franchises to override and make changes to the styles? You use 
several stylesheets, like this: 


卜 youv- ttTMU you tar\ sfedi-fy 
more or\t s*tylcshcc*t. Were, 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= n utf-8"> 

<title>Head First Lounge</title> 

<link type= n text/css’▼ href= M corporate.css" rel= n stylesheet' 

<link type= M text/css n href="beverage-division.css" rel= n stylesheet M > 
<link type= n text/css，▼ href= M lounge-Seattle.css" rel= n stylesheet"> 



Ov\t s-tylcshcct 

*Pov- the Chtivc 
^ovpov-atioh. 



</head> 

<body> 


lou^^e m Seattle 

has i*ts ovjy \ tweaks \ y \ i*ts 

stylesheet 


</body> 

</html> 


s*tylcshcc*t 匕 a 灼 ovevv-ide 
the styles m the 
stylesheets I'mkcd above it. 




Tk bcvcvay aw»s»oy, ^ add 
仫如 donate s^lc a 

OV CVC 於 ovcvv«dc some o^T the 

dov^ova-bc S 七 Yk s . 


So the order of the stylesheets 
matters? 

Yes, they go top to bottom, with the 
stylesheets on the bottom taking precedence. 
So if you have, say, a font-family property 
on the <body> element in both the corporate 
and the division stylesheets, the division’s 
takes precedence, since it’s the last one 
linked in the HTML. 



Do I ever need this for a simple 

site? 

You’d be surprised. Sometimes there’s 
a stylesheet you want to base your page on, 
and rather than changing that stylesheet, 
you just link to it, and then supply your own 
stylesheet below that to specify what you 
want to change. 


Can you say more about how the 
style for a specific element is decided? 

We talked a little about that in Chapter 
7. And for now, just add to that knowledge 
that the ordering of the stylesheets linked 
into your file matters. In the next chapter, 
after you’ve learned a few other CSS details, 
we’re going to go through exactly how the 
browser knows which style goes with which 
element. 
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targeting media types 


Stylesheets—thcyVc wot just for 
desktop browsers anymore... 



There’s actually another reason you might want to have multiple style 
files: let’s say you want to tailor your page’s style to the type of device 
your page is being displayed on (desktops, laptops, tablets, smartphones, 
or even printed versions of your pages). Well, to do that there is a media 
attribute you can add to the <link> element that lets you use only the 


style files that are appropriate for your device. Let’s look at an example: 

The media a*t*tv-ibu*tc 
allows you *to spe^i-fy 
•the type o-f devide this 
s*tylcshcc*b is -fo\r. 



Y°^ spcdi-Py the -type o( 
device by dircatmg a u ^ediia 

^ucv"y / ； y/hidh is matched 

with 七 he device- 


〈link href="lounge-mobile.css" rel="stylesheet" media= n screen and (max-device-width : 480px) n > 


ttcv-c ouv- <^ucv-y spc^i-Pics 
wi 七 h a sdv-cc^ 
opposed -to, say, a 
pv-'m-tev-, o\r ZV glasses ； 
ov- a bv-aillc v-cadcv-)... 


(as oppos 



...a^d a^Y device 
o-f a*b wos*b 今々 


V 

七 h 七 has a >/id^ 
今 GO 


Likewise, we could create a query that matches the device if it is a printer, 
like this: 


<link href="lounge-print.css' 

The 

-Pile is o^ly gomj "to 

be used i-r... 


rel= n stylesheet" media= M print M > 

f •… 

L … the media type is p\r*m*b ) 

y/hidh medics y/cVc viev/mg 

it oy \ a 


There are a variety of propeties you can use in your queries, like min- 
device-width, max-device-width (which we just used), and the 
orientation of the display (landscape or portrait), to name just a few. 
And keep in mind you can add as many <link> tags to your HTML as 
necessary to cover all the devices you need to. 
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Add media queries right into your CSS 

There’s another way to target your CSS to devices with specific properties: rather 
than using media queries in link tags, you can also use them right in your CSS. 
Here’s an example: 


Use 珍 wedia vulc... 



@media screen and 


...-followed by you\r ^ucv-y. 



(min-device-width : 481px) 




#guarantee { 

margin-right : 250px; 




f[Y\d all -the ^rulcs i\\ai 

apply *to devices *this 

c^ucv*y v/rth’m duv-|y bv-adcs. 

So, -these \rulcs will be used i-f the 
Sdv-cc^ is widc\r 午 


@media screen and (max-device-width : 
#guarantee { 

margin-right : 30px; 


@media print { 
body { 

font-family : Times, "Times New 


480px) { 

...-these vulcs will be used i-P 
street is % ov- less … 


^ —- ...a^d these \rulcs will be used i-f 
Roman" , serif; youve *thc pajC- 


p.specials { 

color : red; 



AH o*thc\r \rulcs apply *to all pages because 七 hey 
七 dorrbdmcd 3 SmediS vulc- 


So, the way this works, only the CSS rules that are specific to a media type are included in 
an @media rule. All the rules that are common to all the media types are included in the 
CSS file below the @media rules, so that way you don’t have any unnecessarily repeated 
rules. And, when a browser loads the page, it determines through the media queries the 
rules that are appropriate for the page, and ignores any that don’t match. 


Media queries are an area ol active 
ctevelopment ty tke standarcts groups, 
so keep your eyes on evolving test 
practices lor targeting devices. 



Media queries 
are not 
supported by 
IE8 and earlier. 
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testing your media queries skills 




Look at the devices below along with their specs. Can you design a set of media queries 
to target each device? 


0 

Smartphone ： 
480 by 640 
pixels 



Tablet, portrait, 
or landscape ： 
1,024 by 768 
pixels 






Desktop PC ： 1,280 
by 960 pixels 



Internet TV ： 2,650 by 1,600 
pixels, landscape 


<link rel= n stylesheet" href= n lounge-smartphone.css" 
media= n n > 

<link rel= n stylesheet" href =▼▼ lounge-tablet-portrait.css" 
media= M n > 

<link rel= n stylesheet" href= n lounge-tablet-landscape.css 
media= M ▼▼> 


<link rel= n stylesheet" href= n lounge-pc.css n 
media= M 

<link rel= n stylesheet" href= n lounge-tv.css" 
media= M 


> 


n > 
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the box model 


tJieretare no o 

Dumb Questi9ns 


That’s pretty cool. So I can set 
up different stylesheets for different 
devices? 

Yes, you can set up several 
stylesheets and then link to them all in your 
HTML. It’s the browser’s job to use the right 
stylesheet based on the media type and the 
characteristics you specify in your media 
query. 


Are there other media properties 
besides max-device-width and min- 
device-width? 

Yes, there are quite a few, including 
max and min width (different from device¬ 
width, as you'll see shortly), max and min 
height, orientation, color, aspect ratio, and 
more. Check out the CSS3 Media Queries 
specification for all the details (http://www. 
w3.org/TR/css3-mediaqueries/), and Head 
First Mobile Web for examples. 


Is it better to use <link> or @media 
to specify different CSS rules for different 
media types and characteristics? 

Either one will work. But notice that 
if you put all your rules in one file and split 
them up using @media rules, your CSS 
could get pretty big. By using different <link> 
elements for different media types, you can 
keep your CSS organized in different files 
depending on the media type. So, if your 
CSS files are fairly large, we recommend 
using <link> elements to specify different 
stylesheets. 



In your “chapter9/lounge” folder, you’ll find "lounge-print.css". Open up ‘‘lounge.html’’ in the 
“chapter9/lounge” folder and add a new link to this stylesheet for the media type “print”. Make 
sure you also add the attribute media=“screen” to the <link> element that links to lounge.css", 
so you have one stylesheet for the screen, and one for the printer. Then save, reload the 
page, and choose your browser’s Print option. Run to the printer to see the result! 


<link type="text/css" href="lounge-print.css 
rel= n stylesheet" media="print"> 


ttevVs Imk you *to 

add *to youv* -f ilc- 

Hcv-c^s version- You vc *to*tally 

Aa 哼 dl iiov/ i\\t looks >wV>cr> 

us.” CSS. TKa*t S*tvud*tu\rc vcvsus 
is \rcally - 




,Head First 

lounge 


W elcome to the Head First 


The Head fir, Ixtun^e m, no doubt, die 


Lounge 


of dixin, 
bmnony oftsMc, 





Du™g yaurM , yW(hclwinjejnu . B 
adding ® CMni 

*cnumcots of sights 
bring your laptop. 


* combmcsa 


filling the lounge 


wiihUicreiwiojt 

to ebe Intcmeu t 



Our guarantee: 


Qt 


l ^lounot. we're committed to 


=;=== 二 


topping by to check in 


just 


tfterw/orc 


on ema ^ over an tlixir^or 


^our knowlcdgeobk 


^•of-the^nfinary dinn^i 


tO( 


r fyouV 

处 rwee st<^ffpay attention 


—"v 邮似 - 


Btuehteny HUxg 秘 


驗 麵驗驗驗 r 

>(*unejnnthc Inunge, >wi u aMay* he connect 


OPTIONAL PRINTER KKOIJIKK 1 ), NOT IXCLIJDKD WITH BOOK. 
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testing different css files for different widths 





The max-device-width and min-device-width media characteristics are dependent on the 
actual screen size of the device (not the width of your browser window). What if you are 
more concerned with the size of the browser? Well, you can use the max-width and min- 
width properties instead, which represent the maximum and minimum width of the browser 
window itself (not the screen size). Let’s see how this works: In your “chapter9/lounge” folder, 
you'll find lounge-mobile.css". Open up your lounge.html file again, and change the <link> 
elements in the <head> of the document to look like this: 


<link type= n text/css n rel= n stylesheet M href= n lounge.css" 
media= M screen and (min-width : 481px)'▼> 

<link type= n text/css" href="lounge-mobile.css" rel= n stylesheet” 
media= M screen and (max-width : 480px)'▼> 

<link type= n text/css" href="lounge-print.css" rel="stylesheet" media= n print n > 

Now, reload the lounge.html" page in your browser. Make sure the browser window is nice and big. You 
should see the lounge page as normal. 

Next, make your browser window narrow (less than 480 pixels). What happens to the lounge page? Do 
you notice a difference? Describe below what happens when you make the web page narrow and load 
the page. Why is this version of the page better for mobile browsers? 


Make su\rc youVc a modc\nr\ bvoy/scv| l-f youVc 
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the box model 


BULLET POINK - 

■ CSS uses a box model to control how 
elements are displayed. 

■ Boxes consist of the content area and 
optional padding, border, and margin. 

■ The content area contains the content of the 
element. 

■ The padding is used to create visual space 
around the content area. 

■ The border surrounds the padding and 
content and provides a way to visually 
separate the content. 

■ The margin surrounds the border, padding, 
and content, and allows space to be added 
between the element and other elements. 

■ Padding, border, and margin are all optional. 

■ An element’s background will show under the 
content and the padding, but not under the 
margin. 

■ Padding and margin size can be set in pixels 
or percentages. 

■ Border width can be set in pixels or by using 
the keywords thin, medium, and thick. 

■ There are eight different styles for borders, 
including solid, dashed, dotted, and ridge. 

■ For margins, padding, or the border, CSS 
provides properties for setting all the sides 
(top, right, bottom, left) at once, or it allows 
them to be set independently. 

■ Use the border-radius property to create 
rounded corners on an element with a border. 


■ Use the line-height property to add space 
between lines of text. 

■ You can place an image in the background 
of an element with the background-image 
property. 

■ Use the background-position and 
background-repeat properties to set the 
position and tiling behavior of the background 
image. 

■ Use the class attribute for elements that you 
want to style together, as a group. 

■ Use the id attribute to give an element 
a unique name. You can also use the id 
attribute to provide a unique style for an 
element. 

■ There should only be one element in a page 
with a given id. 

■ You can select elements by their id using the 
id selector; for example, #myfavoriteid. 

■ An element can have only one id, but it can 
belong to many classes. 

■ You can use more than one stylesheet in your 
HTML. 

■ If two stylesheets have conflicting property 
definitions, the stylesheet that is last in the 
HTML file will receive preference. 

■ You can target devices by using media 
queries in your <link> element or the _edia 
rule in your CSS. 
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paying attention? 



HTMLcposs 

You’re really expanding your HTML and CSS skills. Strengthen 
those neural connections by doing a crossword. All the answers 
come from this chapter. 



Across 

1. By default, background images do this. 

4. To create a “ragged” border, use the_border 

style. 

6. Padding, borders, and margins are all_. 

9. Which kind of elixir do you get if you’re not fully 
satisfed? 

10. Between padding and margin. 

13. We changed the_class to an id. 

14. To use a different style for different devices, use 
_queries. 


Down 

2. The space between the content and the border. 

3. If you want your element to have a unique style, use 
this kind of selector. 

5. Property used to increase the space between lines 
of text. 

7. Publishing term for the space between lines. 

8. The preferred font used in the guarantee paragraph. 

10. CSS sees every element as a_. 

11. Style of border we used on the guarantee 
paragraph. 

12. Optional <link> attribute for other kinds of_. 
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the box model 


^harpen your pencil 


See if you can identify the padding, border, and margins of this paragraph. 
Mark all the padding and margins (left, right, top, and bottom): 


Lc-ft 


don't forget, the lounge offers free wireless access to the 
Internet, so bring your fEsptocL 

Toy paddimj 

Our guarantee: at the loungej. we're committed to 

providing you f our guest, with an exceptional n\ 

Ri 吵七 

experience every time you uisk. Wftetfter you're 
just stopping by to check in on email ouer an 


elixir f or are here for an out-of-the-ordinary 
、\ tanner, you'll find our knowledgeable service 

Lc-f-t 


Rigivt 

mav-j'mi 


stqffpay an&uion to every detail If you're not 


JuIIy satisfied，ham a Blueberry Biiss Hixir onus. 

^Bo 七 *torw ^addimj 

乏 Bottom 

But that r s not af[; at night, join us fn the backroom as our 
resident DJ spins a choice se[ection of trance and drumStbass 
beats across our soacfous dkt-themed dance floor. Or fust ham 
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exercise solutions 


BcegctSe 
&9Lvi\o 


H 


If you look at the guarantee paragraph as it’s supposed to look in its final form, it has an 
italic, serif font, a greater line height than the rest of the page, and (if you’re looking really 
close) gray text. Write the CSS below to set the line height to 1.9em, the font style to italic, 
the color to #444444, and the font family to Georgia, “Times New Roman”, Times, serif. 
Here’s the solution...did you test it? 


— ’ V® u 匕 扣 sdd new ^>vopc\rtics anyy/liev-e'm 

v*ulc. I/Vc added a*t "to^. 


• guarantee { 


line-height: 
font-style : 
font-family: 

color : 

1.9em; 

italic; 

Georgia, 
#444444; 

"Times New Roman ", Times , serif; 

border-color : 

black; 


border-width : 

lpx; 

1 

hloh^C i-f 3 -font )i3s spades in i*t> 

border-style : 

solid; 

you should suv-vouhd i*t Quotes. 

background-color : 

#a7cece; 


padding : 

25px; 


margin : 

30px; 



of sights from eras past. And, don't forget^ the lounge offers free wireless access to the Internet, so bring your 

[Esptop, 


j^tv-cascdi I'n^c Wi^vt 


i-talid, scvi-f -foni 


Our guarantee: at the lounge f we're committed to providing you f our guest f with an ^cceptional &cperience every 
time you visit. Whether you're just stopping by to check m on email over an elixir, or are here for an out-of-the- 
ordinary dinner f you'll find our knowledgeable service st(^pay attention to every detail If you're nor Jully 
sadsjled, have a Blueberry Bliss Elixir on us. -j 6v*av dolov- *tV^C 

^ —七 e% 七 a so-ftcv- look. 


But that r s not aH; at night, jofn us in the backroom as our resfdent DJ spins a choice sefection of trance and 
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the box model 



HTMLcross Solution 
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exercise solutions 



ficiSe 
SpLjiiiOH 


Look at the devices below along with their specs. Can you design a set of media queries 
to target each device? 



0 


Smartphone ： 

480 by 640 Tablet, portrait, 

pixels or landscape ： 

1,024 by 768 
pixels 



Desktop PC ： 1,280 
by 960 pixels 



Internet TV ： 2,650 by 1,600 
pixels, landscape 


<link rel= ff stylesheet" href = n lounge-smartphone.css" 
media: n av\d 午 n > 

<link rel= n stylesheet" href =▼▼ lounge-tablet-portrait.css" 

media: n street dr\d (州办一 device - ar\d (o\ricr\*ta*tior\ ： po\rtv*ai*t) n > 

<link rel= n stylesheet" href= n lounge-tablet-landscape.css n 
media= n sdveeh ar\d (ma^-devide-y/id-th ： IOZ 午 p>0 and fov*icr\-ta*tioh ： lar\dsdapc) n > 

<link rel= n stylesheet" href= n lounge-pc.css" 

media= n sdrcc^ ar\d (ma%-dcvide-y/id*th ： I n > 

<link rel= n stylesheet" href= n lounge-tv.css" 

media= If street ^Y\d (ma%-devide-y/idth ： Z^>50p%) n > 


Media suppo\rt a^v-oss devices 
is cvolv'mj, so C\\ct\c *thc Web -fo\r *thc 
latest sy\A 5\rca*tcs*t <\ucs. 



Ouv- a^swev-s hc\rc- Did you yt the sa^c a^swev-s? Thcv-c av-c 你叫 
ways -fco do this W\{\\ vav-y*m^ dcjv-ccs o( spe^i-fi^i-ty- l-f you did i*b 
di-r-fcvc^-tly ； av-c you\rs bc*t*tcv- or wov-sc ou\rs? 
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the box model 



While you’re drinking that iced chai, try your hand at adding a border-radius to the guarantee paragraph 
We’ve got some examples below of the guarantee paragraph with a variety of border-radius values set. 
Write the CSS to create the border you see in the example. For each example, we’ve provided the size 
of the border-radius used to create the rounded corners in that example. 




Our guarantee: at the lounge, we're committed to 
providing you, our yucst, with an cxtx^tinnal cxpcriimcc 
every time you visit Whether you're just stopping by to 
check in on email over an elixir, or are here for an out~of~ 
the-ordinary dinner, you’ll find our knowledgeable 
service staff pay attention to every detail If you’re not 
fully satisfied, have a Blueberry Bliss Elixir on us. 


bo\rdc\r-*top-lc-f*t-v-adius： 
bo\rdc\r—*top—\radius ： 
bo\rdc\r—bo't'tow'—v-igh*t—\radius： 
bo\rdc\r-bo*t*tow\-lc-f*t-v-adlius： 


^o\ay CS£ Kcv-c- 


午0?% 




Our guarantee: at the lounge, we're committed to 
providing you, our guest, with an exceptional experience 
every time you visit Whether yoi/re just stopping by to 
check in on email over an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our knowledgeable 
service staffpay attention to every detail. If you're not 
fully satisfied, have a Rluchinry Bliss Klixir on us. 


bo\rdc\r-*top-lc-f*t-\radlius： 午 Opx; 
bo\rdc\r—*top—\radius ： 午 Op>c; 
bo\rdc\r—bo't'tow'—\radius ： 午 Opx; 
bo\rdc\r—bo't'tow'—v-adius ： 午 Opx; 


午0?% 


Our guarantee: at the lounge, we’re committed to 
providing you, our guest, with an exceptional experience 
every time you visit. Whether you’re just stopping hy to 
check in on email over an elixir, or are here for an out-of- 
thc-ordinary dinner, you7 /find aur knnwlodycablc 
service staffpay attention to every detail. If you're not 
fully satisfied, have a Blueberry Bliss Elixir on us. 


bo\rdc\r—*top—v-adius ： 
bo\rdc\r—*top—\radius ： 午 
bo\rdc\r—bo't'tow'—\radius ： 午 Opx; 
bo\rdc\r—bo*t*to^—v-adius ： 午 Opx; 


2-Cwv 

Our guarantee: at the lounge ， we're committed to 
L providing you, our guest, with an exceptional experience 

every time you visit. Whether you*re just stopping by to 
check in on email over an elixir, or are here for an out-of- 
the-ordinary dinner, youllfind our knowledgeable 
service staff pay attention to every detail. If you’re not 
fully satisfied, have a Rlucbcrry Bliss Elixir on us. 


bo\rdc\r-*top-lc-f*t-\radius： 0cm； 
bo\rdc\r—*top—\radius ： Zcmj 
l)o\rde\r — bottom — \ri3h 七一 radius: Ocmj 
bo\rdc\r-bo*t*tow\-lc-f*t-v-adlius： Zcm； 
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exercise solutions 


mm. 

arsm 

&C(gftct$e 


The max-device-width and min-device-width media characteristics are dependent on the 
actual screen size of the device (not the width of your browser window). What if you are 
more concerned with the size of the browser? Well, you can use the max-width and min- 
width properties instead, which represent the maximum and minimum width of the browser 
window itself (not the screen size). Let’s see how this works: In your “chapter9/lounge” folder, 
you'll find lounge-mobile.css". Open up your lounge.html file again, and change the <link> 
elements in the <head> of the document to look like this: 


<link type="text/css" rel= M stylesheet" href="lounge.css" 
media="screen and (min-width : 481px)’▼> 

<link type="text/css" href= n lounge-mobile.css" rel= n stylesheet” 
media= n screen and (max-width : 480px)'▼> 


<link type="text/css n href= M lounge-print.css n rel="stylesheet M media= n print n > 


Now, reload the “lounge.html” page in your browser. Make sure the 
browser window is nice and big. You should see the lounge page as 
normal. 

Next, make your browser window narrow (less than 480 pixels). What 
happens to the lounge page? Do you notice a difference? Describe 
below what happens when you make the web page narrow and load 
the page. Why is this version of the page better for mobile browsers? 

W\)tY\ we make -the louvre Y\arro^itr 
七 ha 灼 ^0 fivccls, *thc ^uav-air>*tcc 

style- The vi 士 t 

rtdutd -Pv-om -to (b> 

-the v*cs*t b^dk^vouhd 

s*tav- disaffcavs, and t%bra 
-the Irf 七 ^ocs av/ay -too. 


r>r> 


H«ad First Lounge 




Ld First 


tifle 




OY\ 


This vcv-sio^ will woV"k bc*t*tcv -fov mobile 
bv-owsevs because -the fav-ayafh 

"too ^a\rvov/ with the CS£ that’s 
desired -fov- widev* sdv-cc^s. By v-c^ov'mj 

■the ba 乙 kyoimd and the cx*bra 

Br\d the fav-ajv-afh is casicv- 

•to v-ead- >*t ，s v-callv the do^*tc^*t that 
matters at the c^d o+ the day ； v-ijh-t? 


Make suve youVc a modcv-i^ bv-owsev/ l-f youVc usm^ 


Welcome to the Head First Lounge 

The Head First Lounge is, no doubt, the biggest 
trendsetter In Webville. Stop in to sample the 
eclectic offering of elixirs, teas, and coffees, or, 
stay a bit longer and enjoy the multicultural 
culinary menu that combines a harmony of taste, 
texture, and color with the best in fresh and 
healthy ingredients. 

During your stay at the lounge, you'll enjoy a 
smooth mixture of ambient and mystic sounds, 
filling the lounge and adding an extra dimension 
to your dining experience. The decor surrounds 
you with the relaxing sentiments of sights from 
eras past. And, don't forget, the lounge offers free 
wireless access to the Internet, so bring your 
laptop. 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every time 
you visit. Whether you’re just stopping by 
to check in on email over an elixir, or are 
here for an out-of-the-vrdinary dinner, 
you’ll find our knowledgeable service stuff 
pay attention to every detail. If you're not 
fully satisfied, have a Blueberry Bliss Elixir 


But that's not all; at night, join us in the backroom 
as our resident DJ spins a choice selection of 
trance and drum&bass beats across our spadous 
tiki-themed dance floor. Or just hang out in one of 

汽 • if 产汽 nftfw \/8rt\/l M aKar 
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10 d!Vs and spans 




Advanced Web Construction 


Some builders say, 
'measure twice, cut once. 
I say, ''plan, div y and span 


It’s time to get ready for heavy construction, in this chapter we re 

going to roll out two new HTML elements: <div> and <span>. These are no simple 
“two by fours ”； these are full-blown steel beams. With <div> and <span>, you’re going 
to build some serious supporting structures, and once you’ve got those structures in 
place, you’re going to be able to style them all in new and powerful ways. Now, we 
couldn’t help but notice that your CSS toolbelt is really starting to fill up, so it’s time 
to show you a few shortcuts that will make specifying all these properties a lot easier. 
And we’ve also got some special guests in this chapter, the pseudo-classes, which 
are going to allow you to create some very interesting selectors. (If you’re thinking 
that “pseudo-classes” would make a great name for your next band, too late; we beat 
you to it.) 


this is a new chapter 






a new lounge assignment 


You know, wed love it if you 
could make the elixir specials a 
little more attractive on the web 
page. Could you make it look just 
like our handout menu? 


0 


The 



ftcvVs Kdndou 七 menu >wi*tK cli^iv- 

specials. Wow, tKc design is a lot di-f-fev-eni 
iKan tKc v-cst c^f iKc ii’s iK'm, tKc tc%i 
is dch-tcvcd> artd tKcvc avc ved leadings, an 
a<\uamav-'me bov-dev avou^d tKc v/Kolc tKmg, 
aK\d even some dodktail gva^Kids at 七 he 
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divs and spans 


A close look at the elixirs HTML 


Alice sure has asked for a tall order, hasn’t she? She wants us to take the existing lounge HTML 
and make it look like the handout menu. Hmmm.. .that looks challenging, but we do have CSS 
on our side, so let’s give it a try. But before we jump right into styling, let’s get an overview 
of the existing HTML. Here’s just the HTML snippet for the elixir specials; you’ll find it in 
lounge.html” in the “chapter 10/lounge” folder: 


l/Vc have 
iliv-cc 

eli 乂 ivs, 

■the same 
s*brud 七 uve. 



TKc t\\^ s^ct'ials settlor be—s 


<h2>Weekly Elixir Specials</h2> 

<p> 

<img src="images/yellow.gif" alt="Lemon Breeze Elixir▼▼> 

</p> 

<h3>Lemon Breeze</h3> 

<p> 

The ultimate healthy drink, this elixir combines 
herbal botanicals, minerals, and vitamins with 
a twist of lemon into a smooth citrus wonder 
that will keep your immune system going all 
day and all night. 

</p> 


<- 


Bsch cr»x>"»v Kas 
av\ imay a 
<^> element- 

...d \y\ 

<VZ> Kcadmj... 

".dhd d 
dcsdviptioh, 
also ih d 
pairajvapK. 


<P> 

<img src="images/chai.gif" alt="Chai Chiller Elixir M > 

</p> 

<h3>Chai Chiller</h3> 

<p> 

Not your traditional chai, this elixir mixes mat&eacute 
with chai spices and adds an extra chocolate kick for 
a caffeinated taste sensation on ice. 

</p> 


J\t\d tWis 

S*brut 七 uve IS 

vcfcatcd -fov 


<p> 

<img src=" images/black. gif" alt="Black Brain Brew Elixir ▼▼> 

</p> 

<h3>Black Brain Brew</h3> 

<p> 

Want to boost your memory? Try our Black Brain Brew 
elixir, made with black oolong tea and just a touch 
of espresso. Your brain will thank you for the boost. 


</p> 

<p> 


Join us any evening for these and all our 
other wonderful 

<a href= n beverages/elixir.html n 

title="Head First Lounge Elixirs M >elixirs</a>. 


^rnally, at 

botbow ， *tV\cv-c is 

、孙 oUcv \>av-aya\>K, 

some 七 c% 七办 d a Uk *to 
i\\t v-cal \>ay- 


</p> 
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a new element named div 


This looks tough, guys. 
There are a lot of style changes 
weve got to make, and the elixirs 
style doesn’t really match the 
rest of the page. 



Jim: Gome on, Frank, you know we can just create a class or two and then 
style all the elixir elements separately from the rest of the page. 

Frank: That’s true. Maybe this isn’t so bad. I’m sure there is a simple 
property to make text align to the center. And we know how to handle the 
colored text. 

Jim: Wait a sec, what about that border around everything? 

Frank: Piece of cake. We just learned how to make borders. Remember, 
every element can have one. 

Joe: Hmm, I don’t think so. If you look at the HTML, this is a bunch of 
<h2>, <h3>, and <p> elements. If we put separate borders on every element, 
they’ll just look like separate boxes. 

Frank: You’re right, Joe. What we need is an element to nest all these other 
elements inside, so we can put a border on that. Then we’ll have one border 
around everything in the elixirs section of the page. 

Jim: Well, I see why you get paid the big bucks, Frank. Gould we nest the 
elixir stuff inside a <p> element, or a 〈 blockquote 〉？ 


Frank: Well, that would ruin the structure and meaning of the page, an 
elixir menu isn’t a paragraph or a block quote. Feels like a hack to me... 

Frank: ...actually, I don’t think we’re that far off. I’ve been reading a certain 
book on HTML and CSS, and I’m just up to a section on a new element 
called <div>. I think it might be the tool we need. 

Joe: <div> — what’s that? It sounds like it’s for math. 

Frank: That’s not far off, because a <div> lets you divide your page into 
logical sections or groupings. 

Jim: Hey, that sounds like exactly what we need! 

Frank: Yup. Let me show you guys how to divide a page into logical 
sections, and then I’ll show you what I know about <div>... 
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divs and spans 


Let's explore how wg can divide 
a page into logical sections 

Take a look at the web page to the right: it’s a web 
page for PetStorz.com, and we’re going to spend a 
few pages looking at how we might add some more 
structure to it by identifying some logical sections and 
then enclosing those inside a <div> element. 

This is a rvov-mal- 

look'mj page ： lots o-f 
hcad'mgs ； pamagv-aflis, and 


But by just -fodus'mg oy\ tKc sjvudtuve o( tKc 
you v-cally tell a >wKolc lot about tKc page. 
lA/Kai clcmcnis make up tKc header? |s 七 here a 
-fooiev oy\ iKc page? IA/Ka*t av-c tKc dohiciai av-cas? 


dva 叫灼 a 灼 ou 七 1 c 

o^i\st Pctsw 


0 O O PetStorz.com 

j http://www.petstorz.com 





Identifying your logical sections 

Okay, so our job is to locate “logical sections” 
in this page. What’s a logical section? It’s just 
a group of elements that are all related on the 
page. For instance, in the PetStorz.com web 
page, there are some elements that are used for 
the cats area on the page, and some that are 
used for dogs. Let’s check it out. 



The Pc*t£W hs W “m 
a^cas, o^c U tais, one U doy. 
V,as some a^rcas W but >wc II 



In *tKis dasc ； both *tKc da*U and dio^s sections 
donsis-t o( *bwo clcmcirU, a Keadim^ and a 
pav-agv-apV). But o-f-ten 七 hese gv-oup'mjs dan 
dor\*t3m many move clcrwcn*ts. 
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how to mark up logical sections with divs 


Using <div>s to mark sections 

Now that you know which elements belong 
in each section, you can add some HTML 
to mark up this structure. The common 
way to do this is to place <div> opening 
and closing tags around the elements that 
belong to a logical section. Let’s first do this 
pictorially, and then we’ll come back to the 
real markup in a couple of pages. 



Labeling the <div>s 

Just by nesting your elements in <div>s, 
you’ve indicated that all those elements 
belong to the same group. But you 
haven’t given them any kind of label 
that says what the grouping means, 
right? 

A good way to do that is to use an id 
attribute to provide a unique label for 
the <div>. For instance, let’s give the 
cats <div> an id of “cats” and the 
dogs <div> an id of “dogs”. 


hi 


ttcirc y/c ； vc added ar\ id ^7 
o( u ^ats w {jo tlic -fiv-si 
<div> *to irvdiidatc 
七 he lo^idal scdtioh is -fov-. 


/W likewise -fov- do 




p 
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On a referral from the Starbuzz 
CEO, you’ve been asked to 
come in and consult on style 
changes to PetStorz main 
page. How quickly would you 
understand the PetStorz web 
page if you were shown Page 
One? 

What about Page Two? 


Page One 


Page Two 



hi 


V- 


div id=“cats” 


h2 


P 


div id=“dogs” 


h2 


P 


P 


P 


img 


Adding some style 

Okay, so you’ve added some logical 
structure to the PetStorz page, and you’ve 
also labeled that structure by giving each 
<div> a unique id. That’s all you need 
to start styling the group of elements 
contained in the <div>. 


Moyj -the <div>s 
Kavc a little s-tylc. 



By settmg 七 lie 

badkjv-ou^di or\ 

<div>, i*t also shows 
tliv-oujli 七 he clcmcrvb 
dorvta'mcdi m 七 he <div>. 




Heve y/e V^avc b^o v-ulcs, o^c 
eddV^ <aw>. <dw> «S 

sclc6"tcd by id sclc6*tov. 



The elerwerrts \y\ <div> will also _^ 

•mheiri 七 some p\ro^c\rtics -f\rom 七 he 
<div >； jusi as ar\y dhildi clcmchi 
dots (like *fojvt-siz^, dolo\r, rtd). 


#cats { 

background-image : url(leopard.jpg) 


#dogs { 

background-image : url(mutt.jpg) 



£adV\ v-ulc scis i\\t 
badkyouv^d-iw'ajc 

tats 

V^ave a Ico^av-d 
ar»d -fov doy y/c 
a mu 七七 iway. 
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nesting divs 


Exposing even more structure 


There are a couple of reasons you might 
want to add more structure to your 
pages with <div>s. First, you may want 
to further expose the underlying logical 
structure of your pages, which can help 
others understand them, and also help 
in maintaining them. Second, there are 
times when you need the structure so 
that you have a way to apply style to a 
section. Often, you’ll want to add the 
structure for both reasons. 


Wow added 

<diiv> y/rth ah 
id this is the 

Kcadcv o-f ilic pay. 



So, in the case of PetStorz, we could 

take this to the next level and add a few 。 "the page’ 


more <div>s... 


Adding 七 his siv-udiuve ilivoujK <div>s 
help you *tiVmk youv 

design- Fov ms-ta^dc, docs tiVis 
\oY\t <p> v-cally Y\ttd {o be Kcv-c? 



div id=“header” 


hi 


div id=“cats” 


h2 


P 


div id=“footer” 





Adding structure ow structure 

And you don’t have to stop there. It is 
common to nest structure, too. For instance, 
in the PetStorz page, we have a cat section 
and a dog section, and the two together are 
logically the “pets” section of the page. So, 
we could place both the u cats’’ and “dogs” 

<div>s into a “pets” <div>. 

|s/ov/ >wcW marked iKis HTML so -tKat >wc 
knov/ iKcv-c is a logidal sediio^ m iiic 
v/i*tK w pc*ts" m i*t- FuvtKcv-, 

setiioh Kas i>wo logidal subsediio^s, oi\t -fov 
w dats w a^d one -fov w dojs w . 





p 


div id=“foote「” 
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divs and spans 


So, a <div> acts like a container 
that you can put elements into to keep 
them all together? 

It sure does. In fact, we often describe 
<div>s as “containers ■” Not only do they act 
as logical containers that you can use to hold 
a bunch of related elements (like the “cat” 
elements) together, but when we start styling 
<div>s and using them for positioning in the 
next chapter, you’ll see they act as graphical 
containers, too. 

Beyond the structure I’m already 
putting into my pages with headings and 
paragraphs and so on, should I also be 
adding a higher level of structure with 
<div>s? 

Yes and no. You want to add structure 
where it has a real purpose, but don’t add 
structure for structure’s sake. Always keep 
your structure as simple as possible to get 
the job done. For instance, 



if it is helpful to add a “pets” section that 
contains both “cats” and “dogs” to the 
PetStorz page, by all means add it. However, 
if it provides no real benefit, then it just 
complicates your page. After working with 
<div>s for a while, you’ll start to get a feel for 
when and how much to use them. 

Do you ever put a <div> in a class 
instead of giving it an id? 

Well, remember that an element can 
have an id and be in one or more classes at 
the same time, so the choice isn’t mutually 
exclusive. And, yes, there are many times 
you create <div>s and place them into 
classes. Say you have a bunch of album 
sections in a page of music playlists; you 
might put all the elements that make up the 
album into a <div> and then put them all 
in an “albums” class. That identifies where 
the albums are, and they can all be styled 
together with the class. At the same time, 
you might give each album an id so that it 
can have additional style applied separately. 


I was having a little trouble 
following the <div> within <div> stuff, 
with the “pets” and “cats” and “dogs”. 
Could you explain that a little more? 

Sure. You’re used to elements being 
nested in other elements, right? Like a <p> 
nested in a <body> nested in an <html> 
element. You've even seen lists nested 
within lists. The <div> is really no different; 
you’re just nesting an element inside another 
element, and, in the case of PetStorz, we’re 
using it to show larger chunks of structure (a 
“cats” and “dogs” nested in a “pets” section). 
Or, you might use <div>s to have a beer 
section nested in a beverages section nested 
in a menu section. 

But the best way to understand why you'd 
want something like a <div> within a <div> is 
by using them and encountering a situation 
where they mean something to you. Put this 
in the back of your mind, and you’ll see an 
example soon enough where we need one. 


Use, don^t aLuse ， <ctiv>s in your pages. Add more 
structure wkere it kelps you separate a page into logical 
sections lor clarity and stylingf. Adding <ctiv>s just lor 


tke sake ol creating a lot ol structure in your pages 
complicates tkem witli no real teneiit. 
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Meanwhile back at the lounge 


Enough “theory” about <div>s — let’s get one into the lounge page. Remember, we’re trying to get all 
the elixir elements into a group and then we’re going to style it to make it look like the elixir handout. So, 
open up your “lounge.html” file in the “chapter 10/lounge” folder, locate the elixir elements, and then 
insert opening and closing <div> tags around them. 




<div id= n elixirs"> 

<h2>Weekly Elixir Specials</h2> 


a^d v/c'vc it an id o\ 
u di^s ,; io 


Rcmcmbcv, >wcVc just 
sKov/mg d snippet o-r 
HTML -fv-om iKc cy\iiv-c 


<p> 

<img src= n images/yellow.gif n alt= M Lemon Breeze Elixir'▼> 
</p> 

<h3>Lemon Breeze</h3> 

<p> 

The ultimate healthy drink, this elixir combines 
herbal botanicals, minerals, and vitamins with 
a twist of lemon into a smooth citrus wonder 


-file. you oytv\ 

w louir\y.ivt 你 I" ， you, 11 see 

all iKc mavkup ^ov tiic 



that will keep your immune system going all 
day and all night. 

</p> 


<p> 

<img src= n images/chai.gif" alt= M Chai Chiller Elixir M > 
</p> 

<h3>Chai Chiller</h3> 

<p> 

Not your traditional chai, this elixir mixes mat&eacute; 
with chai spices and adds an extra chocolate kick for 
a caffeinated taste sensation on ice. 

</p> 


<P> 

<img src=" images/black. gif" alt="Black Brain Brew Elixir ▼▼> 
</p> 

<h3>Black Brain Brew</h3> 

<p> 

Want to boost your memory? Try our Black Brain Brew 
elixir, made with black oolong tea and just a touch 
of espresso. Your brain will thank you for the boost. 

</p> 


<p> 

Join us any evening for 


these and all our 


other wonderful 

<a href= n beverages/elixir.html" 

title= M Head First Lounge Elixirs ">elixirs</a>. 


</p> 

</div> 



iwe’s dosing -tag. 
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Taking the <div> for a test drive 


That was easy, wasn’t it? Now that we’ve got a more 
structured page, let’s fire up the browser and see 
how it looks … 




\...no 3ll! 

Bui iKai's okay ： iKc <div> 
is puve stv-ud*tuvc, 3ir\di 'rt 
docs^i Kavc ay\y w look w ov 
dc-fauli style m page- 



That said, a <div> is just a blodk 
element ay\d you dan apply any styles 
you y/3ir\*t *to i*t- or\tt you know Kow 
b> style a blodk element (and you do), 
you know liow *to style d <div>. 







Remember, the goal here is to restyle the elixir content on the page 
so it looks like the handout. 

Before we took a detour to learn about <div>s, we were trying to 
figure out how to get a border around the entire set of elixirs. Now 
that you’ve got a <div> in “lounge.html”，how would you go about 
adding a border? 
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adding style to a div 


Adding a border 

Now that you have a <div> around all the elements in the elixirs section, 
the fun begins: j 似 can style it. 

The first thing we want to reproduce in the elixirs handout is a border that 
wraps around all the elements in the elixirs section, right? Well, now that 
you actually have a <div> element that wraps around the elixirs section, 
you can style it and add a border. Let’s try that now. 

You’ll need a new rule in the lounge’s CSS to select the <div> element 
using its id. Open up your “lounge.css” file in the “chapter 10/lounge” 
folder, and add this rule at the end: 


#elixirs { 

border-width : thin; 
border-style : solid; 
border-color : #007e7e; a<\uaw\av-'mc to\or- 


Add 恤 aUk 一 d 7 雜似 I 七 

^ sclcdis <aw> usmj .is ， d, 

扣 d adds a tWm, sd.,d border m ouv ^vo^ntc 


Aw over-the - border test drive 奇 


After you’ve added the CSS, save it and then reload 
your “lounge.html” file. 

tteve’s tKc bovdev- you jus*t added 
{jo di'X.iv-s <div> element 


You added a bovdev- 
to -tWis <dW>, but it st»H V^as 
⑽孙 d ⑽州狄心 . 

V\Zcll *to add *to°- 


S 


Notice tKat tKc bovdev 30c 
dtound all tKc elements inside 
七 lie <div> element TKc <div> 
is a bo% like cvcvy o 七 iicv 
element so y/Kcn you add 
a bovdev, 七 lie bovdev joes 
avouhd tKc dOir\*tcn*t ； V/Kidil is 
all 七 lie elements m 七 lie <div>. 






Head First Lounge 


t © f1le:///chapterl0/lounge/lounge.html » ; 

right in the heart of Webville, and we've created some detailed directions to 
n record time. No reservations necessary; come and join us anytime. 


eekly Elixir Specials 



Lemon Breeze 

The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins 
with a twist of lemon into a smooth citrus wonder that will keep your immune system 
going all day and all night. 


■ 


Chai Chiller 

Not your traditional chai, this elixir mixes mat4 with chai spices and adds an extra 
chocolate kick for a caffeinated taste sensation on ice. 



Black Brain Brew 

Want tu boost yuur memory? Try uur Dldck Drain Brew elixir, mdde with bldck ouluny ted 
dnd just d touch of ebprebbo. Your brain will thank yuu for the boost. 

Join us any evening for these and all our other wonderful elixirs. 
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Adding some real style to 
the elixirs section 

So far, so good. We’ve found a way to get 
that border around the entire section. Now 
you’re going to see how to use the <div> to 
customize the styling of the entire elixirs section 
independent of the rest of the page. 

We obviously have some padding issues to deal 
with, because the border is right up against the 
content. But there’s a lot of other style we need 
to work out, too. Let’s take a look at everything 
we need to take care of... 


a ipadkyouhd 
image ai 

Tlic r»»aih lieadihj 
ahd tKc pavagvaph 
a\rc bla^k ； 

"UiC d\rihk hdmes 
a \red to\oY -that 
tlic Ytd ih 

■tKc logo. 


TKc images 

avc dchtcjrcd) 

ihcvVs oy\ 

iKc sides {jo add 
sf>ade bctv/ccn tKc 
*tc 乂 *t a^di iKc bovdev-. 


TKc o( 七 he cli^ivs 
Kdhdou'b is navvoy/cv 七 ban 七 he 
vest o( tKc page- 


WeeWy Elixir 
Specials 




Lemon Breeze 

T^ e u ^mate healthy drink 

com ^nes herbaf 
botamcafs, rninerafs, and 
vitamins with a twfst of 

. ㈣ b 

， mmUne ^Tn^ 9 aEf 


TKc line - hei 咖 b of 七 he 

pavajv-apKs looks a I 。 七 mov-c 
like the dc-fault I'mc KcigK-t (or 
page fbc-fov-c wc dKangcd i*t 
m 七 he las 七 dKaftcv-). 

TKc *fo 灼七 -family is a sans-sev-i-f -fohi, jus 七 
like tKc body -fo^t so >wc don’t Kavc {o 
七 hat Rcmcmbcv tKa*t tKc <div> 
clcmcn-t and all tKc elements nested m it 

mKcvi*t -font 州 ily -fv-om tKc body- 




TKis link is d < ^udmdv / mc. 


Chai Chiller 

N ° z y. 0 ^ tra_onaf chaf thfs 

^ptces and adds an extra 
r^ OCOlDte kick ^or a 

carrernated taste sensation 
on tee. 


一 * 


Black Brain Brew 

^ b ^ost your memory^ 
y our Black Brafn Brew 
r e * ix,r ^ rnade with bfaefe 
oolong tea and just a touch of 

rh Pr ? SS0, Your bra >^ will 
thank you for the boost. 

J ^nW ny even ^g for these 
r a 0Ur other wonderful ； 

elixirs. 
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plan of attack 


The game plan 


That’s a lot of new style, so let’s get a game plan together before 
attacking it. Here’s what we need to do: 

I — 1 1 First, we’re going to change the width of the elixirs <div> to 
- J make it narrower. 

I 1 1 Next, we’ll knock out some of the styles you’re already familiar 
with, like padding and the background image. We’ll also play 
with the text alignment, which you haven’t seen before. 

I 1 1 Then all we’ve got left are the text line heights and the heading 
colors. You’re going to see that you need to upgrade your CSS 
selector skills just a bit to get those changed. 

That’s a lot to do, so let’s get started. 


Working ow the elixir width 


We’d like the elixirs to be quite narrow, so it looks like the narrow 
handout menu at the lounge; about 1/4 the width of a typical 
browser window should be about right. So, let’s say you set your 
browser to 800 pixels wide; that would be about 200 pixels. You’ve 
set the widths of padding, borders, and margins, but you’ve never 
set the width of an element before. To do that, you use the width 
property, like this: 

#elixirs { 


border-width : thin; 
border-style : solid; 
border-color : #007e7e; 
width : 200px; 




七 lie a\rca. wcVc spcdi-fy'mg 

doir\*tcrrt width be 2.00 pixels. 


iVcVc settmj *t^is oy\ 七 lie cli^ivs <div>. £o dorrtcirrt 
•m 七 he cli%iv-s <div> y/ill be 2-00 pixels y/idc ， 七 lie 
bvowsev^s layout rules y/ill wo\rk *to -fit all 七 Kc 
nested \y\ <div> wrthm >wid*tiv 
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Give this a try. Open your “lounge.css” and add this rule to the bottom. 
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Test drivmg the width 


Next, save the CSS and then reload the “lounge.html” file. You’ll see the elixirs 
section get much skinnier, thanks to the width you gave it. The width of the 
content in the <div> is now exactly 200 pixels. There’s also some interesting 
behavior you should check out". 


» o o 


I lead First Lounge 


Mon. all m cl»^ 

<div> m-to a S\>a6c is too 

?1 %cls V,dc. It doesr /七 ever, 

you make youv Woy/scv vj'mdovj rcaWy 
y/idc, OV really y^arro^. Try it. 


2-00 pixels 


Compav-c bciiavioy* of tV>c <dW> 
-to o( tiic oiKcv elements 
yi\)cy\ you make your bvo>wscv- 
v/mdoy/ v/idc. TV>c pa 浐 aya 卟 s 
au-bomat^ally c^a^d -to -fill tV>c 
y/idtV) of *tiic bvov/sc\r. Well talk 

about tiiai move m a set -- 





<- c n o /chApter^O/lounge/lnungp.html » 

located right In the heart of Webville, and we've created some detailed directions to get you 
hurts in rucurd timu. Nu ruburvdtiunb nucubbdry; cumu dnd join us «anytimu. 


Weekly Elixir 
Specials 



Lemon Breeze 

The ultimate healthy drink, 
VMG elixir combines herbal 
botanicols, minerals, and 

vitamin 宄 with a twist of 
lemon into c9 smooth citrus 
wuruiur thdt will kuup yuur 
immune system going all day 
and all ntght. 


f 




Chai Chiller 

Not your traditional chai, this 
Elixir mixps with rhai 


chocolate kick for a 
caffcinotcd taste sensation 
on icc. 


Black Brain Brew 

Want to boost your memory? 
Try our Dldck Drain Brew 
elixir, made with black 
oolong tea and just a touch of 
espresso. Your brain will 
thank you for thft hnn^t. 

loin us any evening for these 
and all our other wonderful 

elixirs. 




Ko-tidc t^a-t 
W 吵七 d 如 c'''^ ,v ' s 
sc6*t>on jot 3 lot 
■tallcv-. That's because 
y/e made it ^a^rvoy/cv, 
so tVic 6o 灼七 c 灼七 
•takes u\> wove v-oow 
v/cvtitallY 'mstcad. 


What's playing at the Lounge 

We're frequently dsked about th« music we pldy at the lounge, dnd no wonder, It's c^redt 



Can you resize your browser window to less than the width of the elixirs <div>? Some browsers 
won’t let you go that narrow; others will. If you can go narrower, compare the text in the elixirs 
<div> with the rest of the text on the page. The other paragraphs resize themselves no matter 
how wide or narrow you go, but the elixirs <div> never gets narrower or wider than 200 pixels. 
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more about widths 



I was wondering how the width 
property relates to padding and 
margins. Is this the width of the 
content itself? Or the entire box, 
including the padding and margin? 


The width property specifies the 
width for the content area only. 

To figure out the width of the entire box, you 
need to add the width of the content area to the 
width of the left and right margins, the left and 
right padding, and the border width. Don’t forget 
that you have to include twice the border width, 
because there is a border on the left and the right. 

■total y/idili 


Our guarantee: at the lounge, we 5 re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 


ll-ppl/AUIresislv 
^Pl/Av-Svocl 

ll-ppl><r)ulpp2--pllGv 


edh¥ 
a w dt t 
dt_y/i°p 
y/i ^. 二 


-c-ppl/Arpps--p^s 

ll-ppl/A v-svoclAr 
ll-ppl/A ulrl-p^l ^ 
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Well, then how do we 
specify the width of the 
entire element? 


You don’t. You specify the width of the content area, 
the padding, the border, and the margin. All of that 
added together is the width of the entire element. 

Say you set the content area width to be 300 pixels using the width property 
in a CSS rule. 

And let’s say you’ve set the margins to 20 pixels and the padding to 10 pixels, and you 
have a 1 -pixel border. What’s the width of your element’s box? Well, it’s the width of 
the content area added to the width of the left and right margins, the left and right 
padding, and the left and right border width. Let’ see how to calculate that". 

⑴ 丁 lie doirteivt avea is ZOO pixels. 


1>00 pixels 



Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 




(Z) Fijuv-C out Kow mudK is -taken up by 
七 he mav-j'ms, paddmg, and bov-dev-. 




100 


zo + mo 






u - 

> 1 / 

\o\\\ro 

4 



(3) I 七 looks like 厶 Z pixels avc takcirv so 
sdd 七 ha 七七。七 lie dorrte 的七 av-ca^ of 
?>00 pixels ； and wc Kavc ?>00 + 厶 Z 二 3 厶 Z 
pixels -fo\r 七 lie entire bo%. 
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box width and height fine points 


tJiereicire no ^ 

Dumb Questi9ns 


If I don’t set the width of an 
element, then where does the width come 
from? 

The default width for a block element 
is “auto”, which means that it will expand to 
fill whatever space is available. If you think 
about any of the web pages we’ve been 
building, each block element can expand to 
the entire width of the browser, and that’s 
exactly what it does. Now, hold this thought, 
because we're going to go into this in detail 
in the next chapter. Just remember that 
“auto” allows the content to fill whatever 
space is available (after taking padding, 
border, and margin into account). 


What if I don’t have any margin, 
padding, or borders? 

Then your content gets to use the 
entire width of the box. If the width of the 
content area is 300 pixels, and you have no 
padding, border, or margin, then the width of 
the entire box would also be 300 pixels. 

What are the different ways I can 
specify widths? 

You can specify an actual size— 
usually in pixels—or you can specify a 
percentage. If you use a percentage, then 
the width is calculated as a percentage of 
the width of the container the element is in 
(which could be the <body>, a <div> etc.). 


What about the height? 

In general, the height of an element 
is left at the default, which is auto, and the 
browser expands the content area vertically 
so all of the content is visible. Take a look 
at the elixirs section after we set the width 
to 200 pixels, and you’ll see the <div> got a 
lot taller. 

You can explicitly set a height, but you risk 
having the bottom of your content overflow 
into other elements if your height isn’t big 
enough to contain it. In general, leave your 
element heights unspecified so they default 
to auto. 


%|harpen your pencil 

Here’s a I: 


box that has all the widths labeled. What is the width of the entire box? 


J 


YouV airvSWCV* Kcvc 


Our guarantee: at the lounge, we’re 
committed to providing you, our guest, 
with an exceptional experience every 
time you visit. Whether you’re just 
stopping by to check in on email over 
an elixir, or are here for an out-of- 
the-ordinary dinner, you’ll find our 
knowledgeable service staff pay attention 
to every detail. If you’re not fully satisfied 
have a Blueberry Bliss Elixir on us. 
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Adding the basic styles to the elixirs 


We’ve got the width out of the way. What’s left to do? 

「 iv_ First ， we’re going to change the width of the elixirs <div> to 
■ make it narrower. 



Next, we’ll knock out some of the styles you’re already familiar 
with, like padding, text alignment, and the background image. 


lA/eVc dio'mj stc ? 从此 


j 11 Then all we’ve got left are the text line heights and the heading 
colors. You’re going to see that you need to upgrade your CSS 
selector skills just a bit to get those changed. 


Now we’re going to concentrate on some of the basic styles, like the 
padding, the text alignment, and also getting that background image 
of the cocktail glasses in the elixirs <div>. You’re already familiar 
with how most of this works, so let’s take a quick look at the CSS: 


RcmcmbcV) y/cVc going *to apply all 七 liis style *to 
七 he cli^ivs <div> so 七 lia 七 i 七 only a-f-fcd*ts 七 lie <div> 
dlr^d i*t dOh*tairvS ; ir\0*t 



#elixirs { 

border-width : 
border-style : 
border-color : 
width : 


padding-right : 
padding-bottom : 
padding-left : 

margin-left : 

text-align : 


thin; 
solid; 
#007e7e 
200px; 


TV.c default ? aaam 3 ^ a <dw> .s 0 so 
^eVc add sor,c ?aaa-m 3 a b，i 

s ? a"e U Uohu 

addma a^Y ^ because t cre s 

d^aull o, <\0> (look bad at 

last test d.Wc a,d youll see ^ 
v-oom above hst <^t>y But v/c do need rt ^ 

bo*t"tow'> 





rv-om 


i\\t cl'«^v-s *fv 
TW»s is jomj -to dome rn V^a^dy 咖 … 


20px; 


center 


background-image : url(images/cocktail.gif); 
background-repeat : repeat-x; 


Use oy\ blodk clcmCh'ts "to 

aliy iKc tKcy do 山 m. Wcyc, 
v/cVc jo'mj {jo ⑽七 ev - aliy» iKc 七 wt. 


f , 

-fm3lly v/C v-C s^cdi-fymj image bo use \y\ badkjvouir\d ； \Y\ "this 

dasc iKc dodkiail image. WcVc scitmj -tKc badkjv-ou^d-v-cpcai pvopev-ty 
{jo v-cpcat -^； v/KidK Will iilc 七 he image only ih iKc Kov-izohtal div-edtion. 
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how text-align works 


Test drivmg the new styles 




Now it’s time to add those new properties to your 
lounge.css” file and reload the page. Let’s check out 
the changes: the headings, the images, and the text 
are all centered in the <div> and have a little more 
breathing room now that there’s some padding in 
place. We’ve also got a little decoration at the top 
with the tiled cocktail image. 


Wait just a sec...why does the 
toct-align property affect the 
alignment of the images? Shouldn’t 
it align only text? Seems like it 
should be called something else if it 
aligns images too. 



head First Lounge 

G "rt O fili*;///chdplerlO/luunye/louny<!.hlml 

We're lucated right in the heart uf Webville, and we've credted borne detdiled directiunb 
to get you here in record time. No reservations necessary; come and join us anytime. 


f Tlic tiled imay looks 
灼 ide，and i 七 only 七 iles 
liovizjotvtally. 

vc jo-t some 

J\ 

at bottom 
Icf 七 … 

^ — ^ ...and evevy 七 iVmg’ 

dcr\ic\rcci widely. 



Good point...it doesn’t seem right, does it? But the truth 
is that text-align will align all the inline content in a block 
element. So in this case, we’re setting the property on the 
<div> block element, and all its inline content is nicely 
centered as a result. Just remember that text-align, 
despite its name, works on any kind of inline element. 

One other thing to keep in mind: the text-align 
property should be set on block elements only. It has no 
effect if it’s used directly on inline elements (like <img>). 
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O 



Thafs interesting 

because I noticed the text inside the 
<div> is all inside other block elements, 
like <h2>, <h3>, and <p> So, if text-align 
is aligning inline elements in the <div> block 
element, how is the text in these nested 
block elements getting aligned? 



Good catch. All the text inside the <div> 
element is in nested block elements, but it is 
all aligned now. That’s because these block 
elements inherit the text-align property 
from the <div>. So here’s the difference: 
rather than the <div> itself aligning the 
text in the headings and the paragraphs 
(which it won’t do because these are block 
elements), the headings and paragraphs 
are inheriting the text-align value of 
“center”，and then aligning their own content 
to center. 


So what? Well, if you think about it, this 
gives you a lot of leverage when you use a 
<div>, because you can wrap a section of 
content in a <div> and then apply styles 
to the <div> rather than each individual 
element. Of course, keep in mind that not 
all properties are inherited by default, so 
this won’t work for all properties. 
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calculating box widths 


Sharpen your pencil 


So now that you understand widths, what’s the total width 
of the elixirs box? To start with, we know the content area 
is 200 pixels. We’ve also set some left and right padding 
that affects the width, as well as a border that’s set to "thin”. 
Just assume a thin border is 1 pixel thick, like it is on most 
browsers. And what about margins? We set a left margin 
value, but no right margin value, so the right margin is 0 
pixels by default. 

Here are all the properties that relate to width. Your job is to 
figure out the total width of the elixirs <div>. 


border-width : 

thin; 

width : 

200px; 

padding-right : 

2 Opx; 

padding-left : 

2 Opx; 

margin-left: 

2 Opx; 



Wee Wy Elixjr 
Specials 


Lem on Breeze 

^^Sco e rnb ea，thydr/nk ' 
lemon intr, twist °f 

w °^Zt ： 2 0th citrus 

'^rnune system^ V ° Ur 

^an y ? a T n ^ a，， 


w 


Ch ^i Chiller 

管 SB 




fora 


Se nsation 


°n ice. 


Black B rain Brew 

J^ant to boost your 

BraSL T 2 x T r m B，a d Ck 

with black nni r，made 

i ⑽二⑵ r nd 
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WeYc almost there 


We’re close to having the elixirs done. What’s left? 



First, we’re going to change the width of the elixirs <div> to 
make it narrower. 

Next, we’ll knock out some of the styles you’re already familiar 
with, like padding, text alignment, and the background image. 


I 11 Then all we’ve got left are the text line heights and the heading 
colors. You’re going to see that you need to upgrade your CSS 
selector skills just a bit to get those changed. 


^ ^ WcVc 


Sounds pretty easy, right? After all, you’ve done 
all this before. In fact, given that you know you 
can just set styles on the <div> and they will be 
inherited, you can take care of this real fast. 


Weve almost got this done; we 
just need to change the header 
colors and also the line height. 


Frank: Yeah, this is interesting. The main elixirs heading, which is an <h2>, 
has the aquamarine color because there is already an <h2> rule in the CSS. 
But we need for that to be black. Then we’ve got the <h3>s in the elixirs, 
which need to be red. 

Jim: Yeah, no problem, we’ll just add a few more rules. 

Frank: But wait a sec … if we change the <h2> rule, or add an <h3> rule, 
then we’re going to change the heading colors on the entire page. We just 
want these colors in the elixirs section. 

Jim: Oh, good point. Hmmm.. .Well, we could use two classes. 

Frank: That would work, although it’s a bit messy. Anytime you 
add a new heading to the elixirs <div>, you’ll have to remember to 
add it to the class. 

Jim: Yeah, well, e’est la vie. 

Frank: Actually Jim, before you use classes, go check out descendant 
selectors. I think they’ll work better here. 


O 







Descendant selectors? 



Frank: Right, they’re just a way of specifying a selector like “select an <h2> 
element, but only if it’s inside an elixirs <div>.” 

Joe: I’m not following. 

Frank: Okay, let’s step through this … 
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selecting only certain headings 


What arc wc tryiwg to do? 

Let’s take a quick look at what we’re trying to do 
to the heading colors. 


What wc have mow 


Here’s just main 
Keddmg dements m tKc 
lounge ttT/VlL. 


RijKi y\o>w, iKc CS£ says to dolov <Kl> 
and <KZ> element So 

all <Kl> a^d <KZ> elements av-c tKa*t 
dolov, even m tKc cli^iv-s <div>. 



J\v\d Kcv-c^ iKe v-ulc spcdi-fy'mj tKc <Kl> 
and <KZ> dolov m tKc w loumy.6ss” -file. 


What we want 



But i-f >wc 七 he c%istmg vulc -fov <\\2>, y/c’ll a-f-fedt 

*tKc -fo^t dolov o( cvcvy <\\2> m 七 he pay. i*f >wc 

add a ne>/ vulc -fov tKen any <K3>s tKat 3 c 七 added 
-to 七 lie main pay latcv Will be vcd> >wKidK is 的。七 y/Kat >wc 
want Hov/, >wc dould use a dlass like Jim suggested, bui 
y/eVe jo'mj -to give Pvank’s idea a tvy -fiv-st.. 
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What we need is a way to select descendants 

What we’re really missing is a way to tell CSS that we want to only select 
elements that descend from certain elements, which is kinda like specifying that you 
only want your inheritance to go to the children of one daughter or son. Here’s 
how you write a descendant selector. 


Leave a spade between 
hdme dirtdi 
"UlC dcsdcnciairrt ndrrtc. 



} 


color: black 

This rule says -bo select 
a^y <\\2> 七 ha 七 is a 
dcsdc>r\diay\i o-f a <div>. 


I/Vvitc the vest o-f 
youv vulc jus*t like 
you always do- 



tteve’s y/hat this vulc 
sclcd-b m -tlic lounge. 


Now the only problem with this rule is that if someone created another <div> 
in the “lounge.html” file, she’d get black <h2> text, even if she didn’t want it. 
But we’ve got an id on the elixirs <div>, so let’s use it to be more specific about 
which descendants we want: 


Now paven 七 

elemen 七 is 七 he 
element w'rtK 
七 he id cli^ivs. 



#elixirs 


A^d licv-c ； s i-ts 
dcs^chdaht. 



h2 { 


color: black; 


TV^'is \rule says bo sclcdi a^y <\\2> is a 
dcstc^dia^i <^f i\\t \d w di^iv-s w . 



spedi-fid^ so i-f y/c added ano-tlicv <div> y/i-tli an 
<Wl> b> the page, that's okay because this vule 
sclcd*ts only <KZ>s \y\ *tiic cli^ivs <div>. 
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more on selecting children 

- i^^rpen your pencil 


Your turn. Write the selector that selects only <h3> elements inside the elixirs <div>. 

In your rule, set the color property to #d12c47. Also label the elements in the graph 
below that are selected. .... 

youv- v-ulc hcv-c. 





t^ereiare no o 

Dumb Questi9ns 


Descendant usually means child, grandchild, 
great-grandchild. Here, we’re just selecting the child 
descendants, right? 

That’s a really good point. The selector “#elixirs h2” means 
ANY descendant of elixirs, so the <h2> could be a direct child of 
the <div> or nested down inside a <blockquote> or another nested 
<div> (making it a grandchild) and so on. So a descendant selector 
selects any <h2> nested inside an element, no matter how deeply it 
is nested. 

Well, is there a way to select a direct child? 


Yes. For example, you could use “#elixirs > h2” to select <h2> 
only if it is the direct child of an element with an id of “elixirs”. 

What if I need something more complex, like an <h2> that 
is the child of a <blockquote> that is in elixirs? 

It works the same way. Just use more descendants, like this: 

#elixirs blockquote h2 { 
color : blue; 

} 

This selects any <h2> elements that descend from <blockquote>s 
that descend from an element with an id of “elixirs”. 
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Changing the color of the elixir headings 

Now that you know about descendant selectors, let’s set the <h2> heading to 
black and the <h3> headings to red in the elixirs. Here’s how you do that: 


#elixirs h2 { 

color : black; 

} 

#elixirs h3 { 

color : #dl2c47; 


Hcvc ； v/cVc using tKc 
sclcdiovs io 七 just *tKc <\\2> 
and <K3> elements m tKc cli%iv-s <div>. 
WicVc sc-ttmj <KZ> bo bladk, ar\di <W> 
■fco d ved tolov, us'mj d dodic- 


A quick test drive... 

Go ahead and add these new properties to the bottom of your 
i lounge.css ?, file, save, and reload “lounge.html”. 


go*t bladk a^d ved Kcadmjs 
\ y \ tKc cli^ivs sediioh, a^d >wc 

Kavc^-t a-f-fed-ted tKc a«\uamav»me 
dolov bemg used -fov <\\ 2 > 
Keddmgs m *tKc 


Now alUe wd to do 

^ Imc 



you are here ► 


439 

















another way to specify line height 


Fixing the line height 


Recall that in the last chapter, we made the line height of the text in 
the lounge a little taller than normal. This looks great, but in the elixirs 
we want our text to be a normal, single-spaced line height to match 
the handout. Sounds easy enough, right? Just set the line-height 
property on the <div> and everything will be fine, because line height 
is inherited. The only problem is that the headings will also inherit the 
line height, and we’ll end up with something like this. 


l-f you sci tKc I'mc-KcijKi pvopcvty oy \ 
iKc cniiv-c <div>, tKch ii Will be mKcviicd 
by dll m <div>, mdludmj 

Keadmgs. Noiidc tKai tKc I'mc KcijKi m 
■tKc Keddmg is *too small and tKc *bwo Imcs 
avc s-tavtmg *fco vun 




#elixirs { 

line-height: lem; 


The reason that the line height for the elixirs heading is too 
small is because every element in the elixirs <div> inherits 
the line height of lem, or “1 times the font size of the 
elixirs element,” which in this case is “small”，or about 12 
pixels (depending on your browser). Remember, the elixirs 
<div> is inheriting its font size from the <body> element, 
which we set to “small”. 


What we really want is for all the elements in the elixirs 
<div> to have a line height that’s based not on the font 
size of the elixirs <div>, but rather the font size of each 
element itself. We want the <h2> heading to have a 
line height that is 1 times its font size (which is 120% of 
“small”)，and the <p> should also have a line height of 1 
times its font size (which is “small”). How can you do this? 
Well, the line-height property is a bit special because 
you can use a number instead of a relative measure — like 
em or % — for it. When you use just the number 1, you’re 
telling each element in the elixirs <div> to have a line 
height of 1 times its own font size, rather than the font size 
of the elixirs <div>. Give it a try; set the line height of the 
elixirs <div> to 1, and you’ll see that it fixes the heading. 


#elixirs { 

line-height: 


__^ Adda 

<dw> to 
如 w - 


-Poivt siz^s 
"the clcrxCh-ts. Wc set 
body to u sr ， all w ; so thats 
^hciri-tcd by elixirs. 

TV\c Ime - o*f 
<\0> is sc*t to I 七洲《 
七 he s'liC o( , 

cl'i%»v-s, »s w sr»\all ； 

or about 12 - 



body line-height is 
1.6 times "small" 


Wc <V\2-> *to 
V^dve 3 I’me - he 吵七 
七 V^t is I 七 k 
i 七 s ovjy\ 灼七 

七 is, I 午 

(I2>0% small)- 


div id="elixirs" 
line-height is 1 times 
'small", or about 12 pixels 


h2 is 120% of "small" 
line-height is 1 times 
120% of "small", or 
about 14 pixels 


TKc -foht-siiC of the p element is w smal| W (f mhevi-b 
i*ts *foivt - siz^ -f\rom 七 lie di^ivs <div>) > so i*t will Kdve 3 
I'mc-liciglii o( I Z pixels, y/Kidh is y/hat wc y/ant 


440 


Chapter 10 















divs and spans 


Look what you've accomplished ... 吞 


Take a look at the elixirs section now. You’ve 
completely transformed it, and now it looks 
just like the handout. And, other than adding a 
<div> and an id attribute to your HTML, you 
were able to do this with just a few CSS rules 
and properties. 


By now, you should be realizing just how 
powerful CSS is, and how flexible your web 
pages are when you separate your structure 
(HTML) from your presentation (CSS). You can 
give your HTML a whole new look, simply by 
changing the CSS. 


Wow, thafs fantastic! 

You were able to make the 
elixirs section on the website 
look like the handout, with just 
a little CSS. 


O 

o 



Rcmcmbcv, tKis is Ko>w tKc 
cliy.i\rs settlor looked v/Kch 
v/c s-tavtcd... 



© o o 


Head First Lounge 


f- 


G I* 


file:///chaptcrlO/lounge/loungc.html 


» 


Wp'rft located right in the hpart of Webvillp, and we'vp rrpat<*d somp detailed dirprtinns to 
get you here In record time. No reservations necessary; come and join us anytime. 

Weekly Elixir Specials 


Lemon Breeze 

The ultimate healthy drink, thl^ elixir mmhines hprhal hotAnir.al^, mineraK, and vitamins 
with a twist of lemon into a smooth citrus wonder that will keep your immune system 
going all day and all night. 


..dir\d 

v/Ka*t i*t looks 

like r»o>w . 、 


o o o 


Head First Lounge 


O II O file:///chapterl0/loun9e/lounge.html 


» 


Chai Chiller 

Not your traditional chail 
chocolate kick for a cafrl 


your<;plf in rhp Inungp, you'll always t>p rnnnprrprt with nur wir^lpqq Tnrprnpr arrpss. 

Now that youVo experienced the lounge virtually, lent it time to check us out for real? 
Wc'rc located right in the heart of Wcbvillc, ond wc'vc created some detailed directions 
to get you here in record time. No reservations necessary; come and join us anytime. 


Black Brain Brew 

Wrint tn hnnsl ynur mi 
and just a touch of esprj 

Join us any evening for ' 


Weekly Elixir 
Specials 


Lemon Breeze 

The ultimate healthy drink, 
this elixir combines herfcyal 
botaoicals, minerals, and 
vitamins with a twist of 
lemon into a smooth citrus 

wnruier th«it will kppp ynur 
immunp system gniriy «ill dny 

and all night. 


Chai Chiller 

Not your traditional chai, this 
elixir mixes mat^ with chai 
spices and adds an extra 
chocolate kick for a 
r« 9 ffHinHtpd tnstH sensHtinn 
on irp. 


Black Brain Brew 

Want to boost your memory? 
Try our Black Brain Brew 
elixir, made with bldck 
nolony (hh nnd just n tnurh nf 
espresso. Your brain w 川 
thank you for the boost. 

Join us any evening for these 
and oil our other wonderful 

elixirs. 
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specifying properties with shorthand 


Ifs time to take a little shortcut 

You’ve probably noticed that there are quite a few CSS properties that seem to 
go together. For instance, padding-left, padding-right, padding-bottom, 
and padding-top. Margin properties are the same way. How about 
background-image, background-col or, and background-repeat? Those all 
set different property values on the background of an element. Have you also noticed 
it gets a little tedious typing all those in? There are better things to spend your time 
on than typing all this, right? 



padding-top : Opx; 

padding-right : 20px; 

padding-bottom : 30px; 
padding-left : lOpx; 


3 lo*t o-(* jus*t -fco 

4：7 spedi-fy -fouv- hurxbcvs. 


Well, here’s a special bonus for this chapter. You’re going to learn how to specify all 
those values without risking carpal tunnel. Here’s how: 


ttevc 、 七 old—sdV\ool >/3y 

V 

padding-top : Opx; 

padding-right : 2Opx; 

padding-bottom : 30px; 
padding-left : lOpx; 


七 he wow and impv-ovedi 
way *to w\ri 七 e -them as a sho\rtKahdi. 



padding : Opx 20px 30px lOpx; 





You can use the same sort of shorthand with margins: 


margin-top : 

Opx; 

margin-right : 

2 Opx; 

margin-bottom : 

30px; 

margin-left: 

lOpx; 




margin : 


Jus 七 like faddi'mj ； you dan use 
a sliov-tha^di ho spedi-fy all youv- 
values wi*th ov\t p\ro^CV-*ty- 



If your padding or margins are the same value on all sides, 


you can make the shorthand really short: 


padding-top : 
padding-right : 
padding-bottom : 
padding-left : 


20px; 

20px; 

20px; 

20px; 


padding : 


l*f all youv- padding values av-e ilic 
you y/vi*tc i*t like *tKis. 



㈣ “巧 刻 
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Put there's more... 

Here’s another common way to abbreviate margins (or padding): 


margin-top : 
margin-right : 
margin-bottom : 
margin-left: 


■top and hotter 
0 P x ； are same- 

20px 
Opx 

2 Opx; ^ —七 ahd Ic-f-t 
3v-c -tKc same. 




l-f tKc and bo-tiom ； as well as ihc \rijKi and 
mav-j*ms av-c 七 lie 七 heh you da^\ use a sho^rtha^d. 


margin : 



Opx 2Opx; 




And what about the border properties we mentioned? 
You can use a shorthand for those too. 


border-width : 
border-style : 
border-color : 


thin; 

solid; 

#007e7e; 


Rcy/v-'i*tc bov-dev- 
^>v-o\>cv-tics as or\t 

^>v*o?cv" 切 . TV\csc be 

m d^y order you like- 


border : thin solid #007e7e; 


The border shorthand is even more flexible than margins or padding 
because you can specify them in any order you like. 


border : solid thin #007e7e; 
border : #007e7e solid thin; 


border : solid thin; 
border : #007e7e solid; 
border : solid; 


TV^CSC a^TC all 

valid kov"dcv sV\ov"*tKa^ds. 



"and don't forget the shorthand for backgrounds 

You can also use shorthand for backgrounds: 


background-color : white; 

background-image : url(images/cocktail.gif); 
background-repeat : repeat-x; 



ukc bo^rd^, values 50 in order 
• m *tw.s s^o^a^a. a^rc also a 

jfey, ottev values you s ? cd^v m 
sV^o^rtta^a, like badeyo 一 - \>osi 七 10 的 . 


background : white url(images/cocktail.gif) repeat-x; 
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And even more shorthands 


No description of shorthands would be complete without mentioning font shorthands. 
Check out all the properties we need for fonts: font-family, font-style, 
font-weight, font-size, font-variant, and don’t forget line-height. Well, 
there’s a shorthand that wraps all these into one. Here’s how it works: 


av-c -the p\ro^cv-tics that go the 
-fovvt sho\rtKand* Ov-dcv-iwj ma*ttcv-s 
unless wc say othcvwisc... 


ow 七 -families. You Ohly 

need *to spedi-fy owe 

Y® u mus 七 spedi-fy but altcv-nativcs av-c highly 
•fotvt si«. \ endouvaged. 

font : font-style font-variant font-weight font-size/line-height font-family 




These values avc all optional. 
^ s pc^i*fy a^y dombihatlOh o( 
tKcm, bu-t i\)cy heed -to dome 
bc-Po\rc "tKc •poh't.—siz< pv'opcv~'ty. 


Tlie lihC-KcijKt 

P^rofc\rty is oftiohal. 

I*f you "to spedi-fy 
just put d / HjKi 
七 lie -Poh't—siz< 
piropcirty a^d add 
youir lihC KcijKi. 


Use domrmds 

between youv- 

family 

扒 dmCS. 


So let’s give this a try. Here are the font properties for the lounge body: 

font-size : small; 
font-family : 
line-height: 1.6em; 

Now let’s map those to the shorthand: 

Wt， ^ usihj a^y of i^ese, but 

•tha+s okay—iKcyVc all optional. 

/ ^ ^ - ^ 

font : font-style font-variant font-weight font-size/line-height font-family 

And now let’s write the shorthand: 

font : small/1•6em Verdana, Helvetica , Arial, sans-serif; 

A^d IicvVs sliov-tKa^d vcv-siov\. iVow, -tKats d 
sho\rtKav\di ； KuK? YouVc going *to be able {c double youv- time 
3*t *BiC slopes (o\r oy \ the beadK) how. 
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Dumb Questions 

Should I always use shorthand? 

Not necessarily. Some people find the long form more 
readable. Shorthands do have the advantage of reducing the size 
of your CSS files, and certainly they are more quickly entered 
because they require less typing. However, when there is a 
problem, they are a little more difficult to “debug” if you have 
incorrect values or the wrong order. So, you should use whichever 
form is more comfortable because they are both perfectly valid. 

Shorthands are more complex because I have to 
remember the ordering and what is and isn’t optional. How do 
I memorize it all? 

Well, you'll be surprised how quickly it becomes second 
nature, but those of us in the “biz” have a little secret we like to 
call a “reference manual.” Just pick one up, and should you need 
to quickly look up property names or the syntax of a property, 




css is 
for 

presentation 



Left 



Right 


■ Bottom SJ 


To remember the ordering 
of the padding and margin 
shorthand values, think 
of a clock labeled with 
: 0 P ， right, bottom, and 
left. Then, always go in a 
clockwise direction: top 
° r *9^t to bottom to left. 


margin: Opx 20px 30px 10px- 

u % 


just grab your handy reference manual and look it up. We're 
particularly fond of the CSS Pocket Reference by Eric Meyer. 
It’s tiny and makes a great reference. 



It’s time to put all your new knowledge to work. You'll notice that at the bottom of the 
lounge, there’s a small section with copyright information that acts as a footer for the 
page. Add a <div> to make this into its own logical section. After you’ve done that, 
style it with these properties: 


font-size : 50%; 
text-align : center; 
line-height : normal 
margin-top : 30px; 




lets ddd sow»c "top rm3\r0iir\ *to ^ivc 七 he 

-foo-tev a little bvcaiVmg \room. 


Lets make tKc v-cally small- 

iu k 謂 , FINE PRINT. 

fimd lets dchtcv- tKc 

i/VeVc also settmj 七 he I'mc-Kcijlit *to be 
hov-mar, wliidK is d kcyv/o\rd you seen 

yet- W No\rrwa| W allows -tKc b\rowsc\r {jo an 
afpv-op\ria*tc siz^ -fo\r 七 lie Imc KcijK-t, wKidK is 
typidally based on 七 he 七 . 


And while you’re at it, have a look over the entire lounge.css" file. Is there anywhere you 
might want to simplify things with shorthands? If so, go ahead and make those changes. 
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another lounge assignment 



I saw the nice job you 
did on the elixirs. Can you 
give us a hand with the music 
recommendations on the site? 
We don’t need much, just 
some simple styling. 


The lourvje’s 

\rcsidc^*t DJ 




at rr : 二 一 

Enjoy. 

• 0 _ 加 Bar, Claude Cha«e 

• _en 江 Fa"s, Z : r : 

• A L *^ 3, ^ e Le RO il f Enigma 




ICS a\rc 
m 3 y \ rtalid -forvt style. 


all the avi 

avc m bold. 





What do you think is the best way to style the CD and artists in the 
“What’s playing at the Lounge” section? 
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I was thinking we could 
just wrap <em> and <strong> 
elements around the CDs and 
artists. On most browsers, thafs 
going to give us italic and bold. 


Fv-a^k 


Frank: Yeah, but that’s kind of like using a <blockquote> just to 
indent text. What I mean is that we don’t really want to emphasize and 
strongly emphasize the CD and artists. We just want italic and bold. 
Plus, what if someone changes the style for <em> and 〈 strong 〉？ That 
would show up on the CDs and artists too. 

Jim: Well, I actually thought about that, but I couldn’t think of any 
other way to do it. I mean, this is just text in the same list item. It’s not 
like we have any way to style it. 


Frank: What do you mean? 


Jim: We can only style elements, and here we just have a bit of text, 
like, “Music for Airports, Brian Eno”. We’d need an element around 
each piece of text to be able to style them differently. 


Frank: Oh, right, right. I see what you mean. 

Jim: I suppose we could use something like: 

<div class= n cd M >Music for Airport s</div> 

<div class= n artist n >Brian Eno</div>. 

But that’s a block element, so that is going to cause linebreaks. 

Frank: Ahhh, I think you’re on to something, Jim. There’s another 
element like <div> that is for inline elements. It’s called a <span>. That 
could work out perfectly. 

Jim: I’m game. How does it work? 

Frank: Well, a <span> gives you a way to create a grouping of inline 
characters and elements. Here, let’s just give it a try … 
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Adding <span>s in three easy steps 

<span> elements give you a way to logically separate inline content in the same 
way that <div>s allow you to create logical separation for block-level content. To 
see how this works, we’re going to style the music recommendations by first adding 
<span> elements around the CDs and artists, and then we’ll write two CSS rules to 
style the <span>s. Here’s exactly what you’re going to do: 

o You’re going to nest the CDs and artists in separate <span> elements. 

❾ You’re going to add one <span〉to the “cd” class and the other to 
the “artist” class. 

You’re going to create a rule to style the “cd” class with italic, and 
the “artist” class with bold. 


Steps one and two: Adding the <spams 


Open your “lounge.html” file and locate the “Who’s playing at the Lounge” 
heading. Just below that, you’ll see the unordered list of recommendations. 
Here’s what it looks like: 


r 


list to>r\SiS-ts of 3 CP t'tlc, 

⑶七 he av-tist. 


<ul> 

<li>Buddha Bar, Claude Challe</li> 
<li>When It Falls, Zero 7</li> 
<li>Earth 7 , L.T.J. Bukem</li> 


a 


<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li> 
<li>Music for Airports, Brian Eno</li> 


</ul> 


Let’s try adding <span>s to the first CD and artist: 


<ul> 


Jus 七 add a <s^> 

如 tlass a 七七 vibu 七 c a 山 value <A 、d' 

l 


add a dos.” -tag 
"tKc CD ti-tlc- 




Do tlie same -fo\r airtist Htsi i-t 

m a <s P ah> clcw'Chi Ohly -this -time 
put <spa h > ih the VtisT class. 



\ 


<liXspan class= n cd M >Buddha Bar</span>, <span class="artist M >Claude Challe</spanX/li> 

<li>When It Falls, Zero 7</li> 

<li>Earth 7, L.T.J. Bukem</li> 

<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li> 

<li>Music for Airports, Brian Eno</li> 


</ul> 


448 Chapter 10 



divs and spans 







Before we move on, save the file and reload it m your browser. Like a <div>, by default a 
<span> has no effect on style, so you should see no changes. 

Now let’s add some style. Add these two rules to the bottom of your “lounge.css” file: 



WcVc jo'mj *to add a v-ulc -fo\r cadh o-f 
ilic now dlasscs, td and airtisi. 


广 一 、 Pov CDs, v/dl make 

^ s-tyle rtalid. 


font-style : italic; 


.artist { 

font-weight : bold 


《 ^ -fo\r a\rtis*ts y/cll 
set 七 lie 
{p bold. 


Test driving the spans 

That’s it. Save and reload. Here’s what you’ll see: 




-fivs-t musid 
V-CdommChdation 
has *tliC dovvedt 
styling. 



0 


Step three: Styliwg the <span>s 
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more on span 


You need to finish the job. Add <span> elements to the rest 
of the music recommendations and test your page. You’ll 
find the solution in the back of the chapter. 

<ul> 

<liXspan class="cd M >Buddha Bar</span>, <span class= M artist M >Claude Challe</spanX/li> 

<li>When It Falls, Zero 7</li> 

<li>Earth 7, L.T.J. Bukem</li> 

<li>Le Roi Est Mort, Vive Le Roi! , Enigma</li> 

<li>Music for Airports , Brian Eno</li> 

</ul> 


Sharpen your pencil 


tJieretare no o 

Dumb Questions 


When do I use a <span> rather 
than another inline element like <em> or 
<strong>? 

As always, you want to mark up your 
content with the element that most closely 
matches the meaning of your content. So, 
if you are emphasizing words, use <em>; 
if you’re trying to make a big point, use 
<strong>. But if what you really want is to 
change the style of certain words—say, 
the names of albums or music artists on a 
fan site web page—then you should use a 
<span> and put your <span> elements into 
appropriate classes to group them and style 
them. 


Can I set properties like width on 
<span> elements? Actually, what about 
inline elements in general? 

You can set the width of inline 
elements like <span>, <em>, and <strong>, 
but you won’t notice any effect until you 
position them (which you’ll learn how to do in 
the next chapter). You can also add margin 
and padding to these elements, as well as 
a border. Margins and padding on inline 
elements work a little differently from block 
elements—if you add a margin on all sides 
of an inline element, you’ll only see space 
added to the left and right. You can add 
padding to the top and bottom of an inline 
element, but the padding doesn’t affect the 
spacing of the other inline elements around 
it, so the padding will overlap other inline 
elements. 


Images are a little different from other inline 
elements. The width, padding, and margin 
properties all behave more like they do for 
a block element. Remember from Chapter 
5: if you set the width of an image using 
either the width attribute in the <img> 
element or the width property in CSS, the 
browser scales the image to fit the width 
you specify. This can sometimes be handy if 
you can’t edit the image yourself to change 
the dimensions, and you want the image to 
appear bigger or smaller on the page. But 
remember, if you rely on the browser to scale 
your image, you may be downloading more 
data than you need (if the image is larger 
than you need). 
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Hey, I know you think youre about done, 
but you forgot to style the links. They re 
still that default blue color, which kinda 
clashes with our site. 





Think about the <a> element. 
Is there something about its 
style that seems different from 
other elements? 
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how to style links 


The <a> element and its multiple personalities 

Have you noticed that links act a little differently when it comes 
to style? Links are chameleons of the element world because, 
depending on the circumstance, they can change their style at a 
moment’s notice. Let’s take a closer look: 


0 o o 


Here's a lihk you've wr clicked oh 

be*fo 代 . This is tailed kk, w 

or jus 七 ahd i 七 ’s blue by dc-fault 





Head First Lounge 


C A I O file:///chapterlO/lounge/lounge.html 


Chai Chiller 

Not your traditional chai, this 
elixir mixes mate with chai 
spices and adds an extra 
chocolate kick for a 
caffeinated taste sensation 
on Ice. 


a \\rk you 

Kave tl'itkcdi bc-fov-c. 
We 6dll tKcsc w visited 
Uks ” Usually, Visited 
Imks avc displayed 
•m a 忧七 tolov 

七 ha 的 unv'is'rtcdi I'mks so 
you tan tell 
k most 

bvov/sevs, visited \\rks 

3vc ^uv^lc by default. 


Jofn us any evening for these 
Eind at! our other wonderful 

elixirs. 



Head First Lou rug e Elixirs 



i-f you Kold you\r mouse ovcv* S Imk wi*tKou*t 
dlidkihj ； 七 his is dal led 0 i\ some 

b\rowscv-s you’ll see a *tool 七 ip 七 ha 七 displays 
o( tKc “title" atbribu 七 e. /W i*f you fay 
dose aitchiiow ； oy \ some web pages ； you’ll see a 
di-f-fc\rcyrt style as you Kovcv-. 


Unlike other elements, the style of an <a> element changes depending 
on its state. If the link has never been clicked on, it has one style, and 
if it has been clicked on, another. And if you hover over a link, it can 
have yet another style. Perhaps there’s more to styling <a> elements 
than meets the eye? You betcha.. .let’s take a look. 
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How can you style elements 
based on their state? 


tWeiare ng o 

Dumb Questi9ns 


A link can be in a few states: it can be unvisited, visited, or 
in the hover state (and a couple of other states too). So, how 
do you take advantage of all those states? For instance, it 
would be nice to be able to specify what the visited and 
unvisited colors are. Or maybe highlight the link when the 
user is hovering over it. If only there were a way … 

Well, of course there is, but if we told you it involves using 
pseudo-classes you’d probably just decide you’ve read enough 
for the night, and close the book. Right? But hold on! 
Pretend we never said the word pseudo-class, and let’s just 
look at how you can style your links: 


What happens if I just style the <a> 
element like a normal element? Like: 

a { color : red; } 

You certainly can do that, but then your links 
will look the same in all states, which makes your 
links less user-friendly because you can’t tell which 
ones you’ve visited and which ones you haven't. 

What are the other link states you 
mentioned? 


any s ? adcs m ttese sdctUs a : Imk 


l 

a : link { 
color : 


TWis scIcdW is allied 
^ 一 ^ -to Imks >nKcit\ av-c 
green; m u^v.si-tcd state- 


a:visited { 

color : red; 




iKis sdc^-tov- is 
applied *fco I'mks 
iKcy avc visiicd. 


a:hover { 
color : 


yellow; 


Md this sclcd-fcov 
is applied wKch you 
ovc\r a lihk. 


There are two others: focus and active. The 
focus state occurs when the browser focuses on 
your link. What does that mean? Some browsers 
allow you to press your Tab key to rotate through all 
the links on your page. When the browser comes to 
a link, that link has the “focus.” Setting a value for 
the focus pseudo-class is helpful for accessibility 
because those who need to use a keyboard to 
access a link (as opposed to a mouse) will know 
when they've got the right link selected. The active 
state occurs when the user first clicks on a link. 

Can’t my links be in multiple states at 
the same time? For instance, my link could be 
visited, have the mouse hovering over it, and 
the user could be actively clicking on it all at 
once. 


美: 


ExciRciSe 


They sure can. You determine which style is 
applied by the ordering of your rules. So, the right 
ordering is generally considered to be: link, visited, 
hover, focus, and then active. If you use that 
ordering, you'll get the results you expect. 


Add these rules to the bottom of your lounge.css" 
file and then save and reload lounge.html". Play 
around with the links to see them in each state. 
Note that you might have to clear your browser 
history to see the unvisited color (green). 


Okay, I give. What’s a pseudo-class? 

Only one of the most confusing words in 
the CSS language. But as you’ve seen, styling 
links is pretty straightforward. So, let’s talk about 
pseudo-classes... 
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The Pscwdio-ciass 

This week’s interview: 

Getting to know the pseudo-class. 


Head First ： Welcome, Pseudo-class. It’s a 
pleasure to have you here. I must confess that 
when they first asked me to do this interview, I 
drew a blank. Pseudo-class? The only thing that 
came to mind was that ’80s Phil Collins song. 

Pseudo-class ： Uh, that would be Sussudio. 

My name is Pseudo. 

Head First ： Oops. Honest mistake. Maybe we 
could start there. Gan you tell us a little about 
where Pseudo came from? 

Pseudo-class ： Pseudo usually means 
something that looks like the real thing, but isn’t. 

Head First ： And the last name? Glass? 

Pseudo-class ： Everyone knows what a CSS 
class is. It’s a grouping you create to place 
elements in so you can style them together. Put 
“pseudo” and “class” together and you have a 
pseudo-class: it acts like a class, but it isn’t a real 
class. 

Head First: What s not real about it if it acts 
like a class? 

Pseudo-class ： Okay, open up an HTML file 
and look for the class : visited, or : link, or 
: hover. Let me know when you find one. 

Head First ： I don’t see any. 

Pseudo-class ： And yet, a : link, 
a : visited, and even a : hover all allow you 
to specify style, just like they were classes. So, 
those are pseudo-classes. In other words, you 
can style pseudo-classes, but no one ever types 
them into their HTML. 


Head First ： Well then, how do they work? 

Pseudo-class ： You can thank your browser 
for that. The browser goes through and adds all 
your <a> elements to the right pseudo-classes. 

If a link’s been visited, no problem; it goes 
into the : visited pseudo-class. Is the user 
hovering over a link? No problem, the browser 
throws it in the : hover pseudo-class. Oh, now 
the user isn’t hovering? The browser yanks it 
out of the “hover” pseudo-class. 

Head First ： Wow, I never knew. So there are 
all these classes out there that the browser is 
adding and removing elements from behind the 
scenes. 

Pseudo-class ： That’s right, and it’s damned 
important to know about; otherwise, how would 
you give your links style that adapted to what 
state the link was in? 

Head First ： So, Pseudo, do you just do links? 

Pseudo-class ： No, I do other elements too. 
Modern browsers already support pseudo¬ 
classes like : hover on other types of elements. 
And there are some other pseudo-classes, too. 
For instance, the pseudo-class : first-child 
is assigned to the first child of any element, like 
the first paragraph in a <blockquote>. And 
you can even select the last paragraph of a 
<blockquote> with the : last-child pseudo¬ 
class. I’m quite versatile, really. 

Head First: Well, I Ve certainly learned 
something in this interview. Who knew that 
song was actually called “Sussudio ”？！ Thanks 
for being here, Pseudo-class. 
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Putting those pseudo-classes to work 

Okay, let’s be honest. You’ve probably just learned the most important thing in this 
book: pseudo-classes. Why? No, no, not because they allow you to style elements 
based on various “classes” your browser decides they belong to, like : link or 
: first-child. And, no, not because they give you really powerful ways to style 
elements based on things that happen while your visitors are using your page, like 
: hover. It’s because the next time you’re in that design meeting and you start talking 
about pseudo-classes with a real understanding, you’re going to move to the head of the 
class. We’re talking promotions and bonuses., .at a minimum, the awe and respect of 
your fellow web buddies. 


So, let’s put those pseudo-classes to good use. You’ve already added some pseudo-class 
rules to your “lounge.css” and they had a dramatic impact on the look of the links, but 
they’re probably not quite right for the lounge. So let’s rework the style a little: 


/N, L 八 V V^.lA/cVc US” a sclcdV 

I'mks rnsidc cli^ivs. 



#elixirs a : link { 
color : #007e7e 


#elixirs a:visited 
color : #333333; 




0y\ tKcsc two, wcVc settmj dolov. 
Fov unvisi-ted links, a nidc a^uamavinc... 

...dK\d -fov visi 七 ed Imks v/cVc 
us'mg a dav-k jvay- 


#elixirs a : hover { 

background : #f88396 
color : #0d5353; 



Koy/ (o^r ihc \rcally ihicv-csiir»g vule. iVKeh 
tiie useir is hovc\rir»g ovcv- iKc lihk, y/eVe 
-tKc bddk^vouhd "to \rcd- Tliis 
-the lihk loo KijUijK'tcd wliCh you 
pass -tKc mouse ovcv- ii. i*t 3 {yyl 



Open up your "lounge.css" and rework your a:link, a:visited, and a:hover 
rules to use the new descendant selector and the new style definitions. 
Save, reload, and turn the page. 
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Test drive the links 

When you reload, you should see some new 
style in the elixirs section. Keep in mind, to see 
the unvisited links you may have to clear your 
browser’s history; otherwise, the browser will 
know you’ve visited these links before. 


Nov/ go*t omv/isi 七 cd 

Imks, gv-ay visi-tedi I'mks, a 
vevy dool v-cd liigWigivt 
you Kovcv ovcv iKc I'mk. 



Sharpen your pencil 


Your job is to give the "detailed directions” link in the lounge some style. Just like the 
elixirs link, we want all unvisited links to be aquamarine, and all visited links to be gray. 
However, we don’t want the other links in the lounge to have any hover style...that's 
unique to the elixirs. So, how would you do it? Fill in the blanks to give the "detailed 
directions” link, and any other links you might add to the lounge later, this style. Check 
your answer in the back of the chapter and then make the changes in your lounge files. 


{ _ : #007e7e; } 

{ : #333333; } 
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divs and spans 


Isn't it about time we talk about the "cascade"? 

Well, well, we’re quite far into this book (457 pages to be exact) and we still haven’t 
told you what the “Cascade” in Cascading Style Sheets is all about. Truth be told, you 
have to know a lot about CSS to fully understand the cascade. But guess what, you’re 
almost there, so wait no more. 

Here’s just one last piece of information you need to understand the cascade. You 
already know about using multiple stylesheets to either better organize your styles 
or to support different types of devices. But there are actually some other stylesheets 
hanging around when your users visit your pages. Let’s take a look: 



The author 
(that’s you!) 


Fivst, -tKcv-c avc all 
iKc stylcsKccis you^c 
v/vitt ⑶ -fov youv 


The reader 
(your users) 


W\\cy\ b\roy/scv needis -to dctcv-mirvc 
wKidK style *to apply -to an element i-t uses 
all tKcsc stylesheets. Pv-iov'rty is given -fiv-st 
b> 七 he author’s styles (七 ha 七 is, youv- styles), 
tKcirv {o styles ； ahd tKcn 

-finally {o 七 he browser’s dc-fault styles. 


|\/oic tiicv-c is a >way -fov a v-cadcv- 
{p ad 七 ualb/ ovcv-v-idc youv- s-tylcs. lo do 
七 ha 七 k fu*ts w |impov**t3y\*t W 
o-f a pv-opeviy dctlavatio^. 



But some bvoy/sev-s also allow usevs 

to ⑽ ate styles U 

HTML clcmc^is. l-f youv 

doesn't drf mc ttese sbj\ts, ttc 
usev-'s ,s uSC< ^ mS ^ ca< ^* 


J\v\d -f inal ly, you already 
kho>w *tKat 七 he bvoy/sev 




The browser 


i*Ucl-f mamtains a set o-f 
dc-fauli styles -tKat av-c 
used i-f you don ’ 七 dc-f mc 
tKc styles -fov ar» dement 
TKcsc avc also tKc s-tylcs 
tKat avc used i-f you dor!{, 
Kave d^y 3utKov ov vc3dcv- 
stylcsKccts. 
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what the cascade does 


So, to review, as the page authors, we 
can use multiple stylesheets with our HTML. 
And the user might also supply his own styles, 
and then the browser has its default styles, 
too. And on top of all that, we might have 
multiple selectors that apply to the same 
element. How do we figure out which styles 
an element gets? 


O 



That’s actually another way of asking what 
cascade does. The cascade is the way the 
browser decides, given a bunch of styles 
in a bunch of stylesheets, which style is 
going to be used. To answer that question, 
we need to bring everything together — all 
the various stylesheets hanging around, 
the rules, and the individual property 
declarations in those rules. 

In the next two pages, we’re going to step 
through the nitty-gritty details of how all 
this works. The details involve a lot of 
sorting and various details of determining 
which rules are the most specific with 
respect to an element. But here’s the payoff: 
after going through the next two pages, 
you’ll be able to get to the bottom of any 
styles that don’t seem to be applied in the 
way you expect, and further, you’re going 
to understand more about the cascade than 


99% of web page developers out there 
(we’re not kidding). 
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The cascade 



For this exercise, you need to “be the browser.” Let’s say you’ve got an <hl> 
element on a page and you want to know the font-size property for it. Here’s 
how you do it: 

Step one: 

Gather all your stylesheets together. 

For this step you need all the stylesheets: the stylesheets the web page 
author has written, any stylesheets that the reader has added to the mix, 
and the browser’s default styles. (Remember, the browser now, so 
you have access to all this stuff!) 

Step two: 

Find all the declarations that match. 

We’re looking specifically for the font-size property, so look at all the 
declarations for font-size that have a selector that could possibly select the 
<hl> element. Go through all the stylesheets and pull out any rules that match 
<hl> and also have a font-size property. 

Step three: 

Now take all your matches, and sort them. 

Now that you’ve got all the matching rules together, sort them in the order of 
author, reader, browser. In other words, if you wrote them as the author of the 
page, then they are more important than if the reader wrote them. And, in 
turn, the reader’s styles are more important than the browser’s default styles. 






r 





veddev* tould ^U*t 

oy \ Kis CS£ 

V>e does 七 hat tV>osc 
^>v*opcv*t»cs ton\t *fiv*s 七 


Step four: 

Now sort all the declarations by how specific they are. 

Remember, we talked about this a little, way back in Chapter 7. You can 
intuitively think about a rule being more specific if it more accurately selects 
an element; for instance, the descendant selector “blockquote hi” is more 
specific than just the “hi” selector because it only selects <hl>s inside of 
<blockquote>s. But there is a little recipe you can follow to calculate exactly 
how specific a selector is, and we’ll do that on the next page. 

Step five: 

Finally, sort any conflicting rules in the order they appear in their 
individual stylesheets. 

Now you just need to take the list, and order any conflicting rules so that the ones 
appearing later (closer to the bottom) of their respective stylesheets are more important. 
That way, if you put a new rule in your stylesheet, it can override any rules before it. 

That’s it! The first rule in the sorted list is the winner, and its font-size property is 
the one to use. Now let’s see how you determine how specific a selector is. 
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calculating specificity 


Welcome to the "Whaf s my specificity?" game 

To calculate the specificity, you start with a set of three numbers, like this: 



And then we just tally up various things from the selector, like this: 


Does the selector 
have any ids? One 
point each. 



Does the selector 
have any classes 
or pseudo-classes? 
One point each. 



Does the selector have 
any element names? 
One point for each. 



For instance, the selector “hi” has one element in it, so you get: 


Read this as 七 he 

jrvuw»bcv* o>r\C- 


0 0 1 


As another example, the selector “hi.blue” has one element and 
one class, so you’d get: 

Read 七 Wis as 七 he 

lr^UW'bcV* clcVCirv- 




BotK \l )} ay\A W bluc w V>avc one 
clcmcn-t, so tKcy both y 七 a I m 

tolumyv. 


blue” also has 0Y\t dass, so i 七 yts 
a I ih rmidicllc numbev* dolunrm. 



NciiKcv- Kas ids m its sclcdtov ； 
so *tKcy bo*tK gc*t a 0 m tKc 

ir»umbc\r doluwm 


After you’ve tallied up all the ids, classes, and elements, the bigger the specificity 
number, the more specific the rule. So, since “hi.blue” has a specificity of 1 1， it is 
more specific than “hi”，which has a specificity of 1. 


<^harpen your pencil 


Try your hand at calculating the specificity of these selectors using the rules above: 


hl.greentea 

pimg 


ol li p 
.green 


em 

span.cd 


a:link 


#elixirs hi 


#sidebar 
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tJiereicire no ^ 

Dumb Questi9ns 


What makes a specificity number 
bigger than another? 

Just read them like real numbers: 100 
(one hundred) is bigger than 010 (ten) which 
is bigger than 001 (one), and so on. 

What about a rule like “hi, h2 ”； 
what is its specificity? 

Think of that as two separate rules: 
an “hi” rule, which has a specificity of “001” 
and an “h2” rule that also has a specificity 
of “001”. ^ 


Can you say more about the 
!important thing? 

The reader can override a style by 
putting an “! important” on the end of his 
property declarations like this: 

hi { 

font-size : 200% liirportant; 

} 

and this will override any author styles. 


I can’t get the reader’s stylesheet, 
so how can I ever figure out the way the 
cascade works? 

You can’t, but look at it this way: if 
the reader overrides your styles, then that 
is really beyond your control. So just make 
your pages look like you want them to using 
your styles. If the reader chooses to override 
them, then he’ll get what he asks for (for 
better or for worse). 


Putting it all together 


Woo hoo! It’s time for an example. Say you want to know the color 
property for this <hl> element: 

<hl class="blueberry M >Blueberry Bliss Elixir</hl> 


Let’s take this through all the cascade steps: 

Step one: 

Gather all your stylesheets together. 




youVc the auiKov 
(the pC\rsoh wv-i-tiha 

CS£). But might how,7 


The author 


RcmCW'bcV', you VC 
be Wo>wscv, because 
you’ve 

Jpi^uvc out *to 
display <V\I> 
element 


hl 

^ - 1 

} 

color : black; 1 


The browser 


body hi { 

color: #cccccc; 

} 


youVc -feKc bv- 


owsev-. 



UaVs 70 U (W _)• 


The reader 




Wo>mscv 
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using the cascade 


Step two: 

Find all the declarations that match. 


Redder 


body hi { 

color: #cccccc, 


Hcvc avc all v-ulcs 
dould possibly matdK tKc <Kl> 
element and "that 6or\*tam 
-tKc dolov pvo^cvty- 


Step three: 

Now take all your matches, and sort them by 
author, reader, browser. 


hi 


Bv-oy/scv 


color: black; 



hi 


color: #efefef, 


Au-tKo\r 


hl.blueberry { 
color: blue; 


hi 


color: #efefef; 


AutKoir 


Rcadcm 


Bvo>/scv- 


hl.blueberry { 
color: blue; 

} 

body hi { 

color: #cccccc; 

} 

hi { 

color: black; 

} 



Here v/e’ve jus 七 
v-cov-dcv-cd {ht 
v-ulcs by autiiov-, 
{}\tY\ v-cadcv-, ay\d 
ihc 灼 bv-ov/sev-. 


Step four: 

Now sort the declarations by how specific they are. To do that, we need to 
first calculate each specificity score, and then reorder the rules. 

0 0 1/ 7 ] color : blue ; 

TKc V-ulc v/iiK / ) 


color: #efefef; 


hi.blueberry { 
color: blue; 

} 

body hi { 

color: #cccccc; 

} 

hi { 

color: black; 


1 


00 z 
0 0 1 




hi.blueberry { 


tKc blucbcvvy 
dlass moves 
{jo *tKc *bof 
bcdausc i*t K3S 
KijKcs-t 
s^>cdi-fidi*ty. 


hi 


color: #efefef; 


body hi { 

color: #cccccc; 

} 

hi { 

color: black; 


No 七 idc 七 ha 七 y/c only sov 七 y/i 七 iVm 七 lie an 七 liov, 
Yt^Acr) and bvoy/sev da 七 cgovics. iVc do〆 七 vc-sovt 
七 lie eirrtivc lis 七 , ov else 七 lie “body Kl” vulc y/ould 
move above tKc )l v-ulc set by tKc autKo\r. 


0 1 
0 0 


0 0 
0 0 
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Step five: 

Finally, sort any conflicting rules in the order 
that they appear in their individual stylesheets. 


WicVc okay licvc, because we dor /七 Kavc 
any don-flidtmg rules a 七七 his pom 七 . TKc 
blucbcvvy, a sdovc o-f II, is dlcav 
y/'mncv-. if ihc^re Kdd been *bwo v-ulcs y/i-tK 
a sdovc o-f Oil, 七 lien 七 he vulc appeav-'mg 
latest y/ould be *tiic y/'mrvcv. 



We have a winner... 

After sweating through the first choice of elements, the 
sorting, more sorting, and being judged on specificity, 
the x 'hl.blueberry #, rule has risen to the top. So the color 
property in the <hl> element will be blue. 


hi.blueberry { 
color: blue; 




hi 


color: #efefef, 


body hi { 

color: #cccccc 

} 


Rcsdc 


\r 


hi 


color: black; 


B\roy/scv- 



Dumb Quest! 


9ns 


So, one more time: I get that the lower in the CSS file, the 
higher the precedence, but how does having multiple links to 
stylesheets in my HTML work? 

It's always top to bottom, whether it is in the same CSS file or 
not. Just pretend that you inserted the CSS all together right into your 
file in the order the files are linked. That’s the order that counts. 

So when you sort for specificity, you don’t re-sort 
everything? 

No. Think of each time you sort as refining what you’ve done 
before. So first you sort for author, reader, browser. Then, within each 
of those sortings, you sort for specificity. And then, for any elements 
that have the same specificity, you sort again based on the ordering 
in the stylesheets. 


Do readers really make their own stylesheets? 

By and large, no. But there are cases where people with visual 
impairments do, and of course you’ve always got the crowd that just 
has to tinker with everything. But since each reader is controlling only 
how she sees things, it really shouldn’t factor into your designs. 


How much of this do I really need to remember? 


You’re going to develop some intuition for how all these 
stylesheets fit together, and on a day-to-day basis that intuition will 
get you a long way. Every once in a while, though, you’ll see a style 
popping up in your pages that just boggles your mind, and that’s 
when you fall back on your training. You’ll be able to work through 
the cascade, and before you know it, you’ll know exactly what’s 
happening in your page. 
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when the cascade doesn’t provide a value 


O 


So, what happens if, after all 
this, I still don’t have any rules 
with a property declaration for 
the property value I*m trying to 
figure out? 



Ah, good question. We actually talked about this a little in 
Chapter 7. If you don’t find a match for the property in 
any rules in the cascade, then you try to use inheritance. 
Remember that not all properties are inherited, like 
border properties, for instance. But for the properties that 
are inherited (like color, font-family, line-height, 
and so on), the browser looks at the ancestors of the 
element, starting with its parent, and tries to find a value 
for the property. If it does, there’s your property value. 


Got it. Hey, but what if the 
property isiVt inherited or 
I caiVt find a value in the 
ancestors rules? Then what? 


Then the only thing left to do is fall back 
on the default values that are set in the 
browser’s stylesheets, and all browsers 
should have default styles for every element. 


0 


O 


Oh, and why 
is this called the 
'cascade" anyway? 




The name “cascade” was chosen because of the 
way that styles coming from multiple stylesheets can 
all “cascade” down into the page, with the most specific 
styling being applied to each element. (If that doesn’t clear 
things right up for you about why it’s called cascade, don’t 
feel bad. It didn’t make it any clearer for us, either. Just 



call it “CSS” and move on.) 
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STOP! Do te exercise before 
going on to the next ch^ter! 






This is a special brain power — so special that we’re going 
to let you think about it between chapters. Here’s what 
you need to do: 

o Open the file “lounge.html” and locate the elixirs <div>. 

❻ Move the entire elixirs <div> section to the top of the 
file so it’s just below the paragraph that contains the 
lounge logo. 

❺ Save and reload your page. What changed? 

o Open the file “lounge.css”_ 

❺ Locate the “#elixirs” rule, 
o Add this declaration at the bottom of the rule: 


float: right; 


o Save your file, and reload the page in your browser. 
What changed? What do you think this property does? 
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review of divs, spans, and pseudo-classes 


BULLET POINTS - 

■ <div> elements are used to group related elements 
together into logical sections. 

■ Creating logical sections can help you identify the main 
content areas, header, and footer of your page. 

■ You can use <div> elements to group elements 
together that need a common style. 

■ Use nested <div> elements to add further structure to 
your files for clarity or styling. But don’t add structure 
unless you really need it. 

■ Once you have grouped together sections of content 
with <div> elements, you can style the <div>s just like 
you would any other block element. For example, you 
can add a border around a group of elements using 
the border property on the <div> they are nested in. 

■ The width property sets the width of the content area 
of an element. 

■ The total width of an element is the width of the 
content area, plus the width of any padding, border, 
and margins you add. 

■ Once you set the width of an element, it no longer 
expands to fit the entire width of the browser window. 

■ Text-align is a property for block elements that aligns 
all inline content in the block element, to the center, left 
or right. It is inherited by any nested block elements. 


You can use descendant selectors to select elements 
nested within other elements. For instance, the 
descendant selector 

div h2 {•••} 

selects all <h2>s nested in <div> elements (including 
children, grandchildren, etc.). 

You can use shortcuts for related properties. For 
instance, padding-top, padding-right, padding-bottom, 
and padding-left are all related to padding, and can be 
specified with one shortcut rule, padding. 

Padding, margin, border, background, and font 
properties can all be specified with shortcuts. 

The <span> inline element is similar to the <div> 
element: it is used to group together related inline 
elements and text. 

Just like with <div>, you can add <span> elements to 
classes (or give <span> elements unique ids) to style 
them. 

The <a> element is an example of an element with 
different states. The main <a> element states are 
unvisited, visited, and hover. 

You can style each of these states separately with 
pseudo-classes. The pseudo-classes used most often 
with the <a> element are :link, for unvisited links; 

: visited, for visited links; and : hover, for the hover state 

Pseudo-classes can be used with other elements too, 
not just <a>. 


■ Additional pseudo-classes are the : hover, : active, 
: focus, : first-child, and last-child pseudo-classes, 
among others. 
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i^^arpen your pencil_ 

Here’s a box that has all the widths labeled. Your job was to 
figure out the width of an entire box. Here’s the solution. 



^0 + Z + 5 + ZOO + 10 + Z + ZO 二 za pixels 


vO 




to 
% 

5 - '5- 


ZOO pixels 


V) 

-53 -S2 

t ^ 


^harpen your pencil 


So now that you understand widths, what’s the total width of the elixirs box? To start with, 
we know the content area is 200 pixels. We’ve also set some left and right padding that 
affects the width, as well as a border that’s set to "thin”. Just assume a thin border is 1 pixel 
thick, like it is on most browsers. And what about margins? We set a left margin value, but 
no right margin value, so the right margin is 0 pixels by default. 

Your job was to figure out the total width of the elixirs <div>. Here’s the solution. 


ZO + ZO + ZOO + 1 + 1 + 0 + ZO - Z^)Z 


<p 

D- 

-P 


a- 

-p 


-P 

s 

o 


•S 


J 1 1 

f t 


.s 






Sharpen your pencil 



Your turn. Write the selector that selects only <h3> elements inside the elixirs 
<div>. In your rule, set the color property to #d12c47. Also label the elements 
in the graph below that are selected. Here’s the solution. 

^di%i\rs \\ 1 > { 
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exercise solutions 



KciSe 

Otjil 


OLviiow 


It’s time to put all your new knowledge to work. You'll notice that at the bottom of the 
lounge, there’s a small section with copyright information that acts as a footer for the 
page. Add a <div> to make this into its own logical section. After you’ve done that, 
style it with these properties: 


font-size : 50%; 
text-align : center; 
line-height : normal 
margin-top : 30px; 




Let’s make -tKc v-cally small. 

iu FINE PRINT. 

/W lets dehtev *tKc 

1/VcVc also settmg 七 lie 七 

*to be W y\o\rma| W . 


s add some *feop *to ^ive *tKc 

-fooiev a little bvcailiihg \room. 


Plate <dw> -tay 

avou^d 

V 


fi[v\d jive i*t ar\ id hamed u -Poo*tcv- w . 


4 

<div id="footer"> 

<P> 

&copy; 2012, Head First Lounge<br> 

All trademarks and registered trademarks appearing on 
this site are the property of their respective owners. 

</p> - 

</div> 


cvch bc*t*tcv- solution would be to 
<p> bo <small>, whidh is ar\ dcmch*t desired 
spcdi-fidally -for u small TVy i 七 , 


^v\d hcve^s -the CSS -fov *thc -footev. 



#footer { 

font-size : 50%; 
text-align : center; 

1ine-height: normal; 
margin-top : 3Opx; 
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Your job was to finish adding the <span> elements to the rest of the music 
recommendations and test your page. Here’s the solution: 


<ul> 

<liXspan class= M cd M >Buddha Bar</span>, 

<span class= M artist n >Claude Challe</spanX/li> 
<liXspan class= M cd M >When It Falls</span>, 

<span class= n artist n >Zero 7</spanX/li> 

<liXspan class= n cd M >Earth 7</span>, 

<span class="artist n >L . T . J. Bukem</spanX/li> 
<liXspan class= n cd M >Le Roi Est Mort, Vive Le Roi!</span>, 
<span class= M artist n >Enigma</spanX/li> 

<liXspan class= M cd M >Music for Airports</span> 

<span class= M artist n >Brian Eno</spanX/li> 

</ul> 


What’s praying at the Lounge 

We're frequency asked about the musfc we pfay at the founge^ and no wonder. 
It's great stuff. Just for you,, we keep a list here on the srte^ updated weekly. 
Enjoy. 

* Buddha Bar, Claude Challe 

* When It FaHs f Z^ro 7 

■ Earth 7 f LTJ, Bukam 

■ Le Roi Est Mon r Vive Le RoU r Enigma 

* Music for Airports f Brian Eno 
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一 ^^arpen your pencil_ 

Your job is to give the "detailed directions” link in the lounge some style. Just like the 
elixirs link, we want all unvisited links to be aquamarine, and all visited links to be gray. 
However, we don’t want the other links in the lounge to have any hover style...that's 
unique to the elixirs. So, how would you do it? Fill in the blanks to give the "detailed 
directions” link, and any other links you might add to the lounge later, this style. Here’s 
the solution. 


a:lmk 

{ 

dolor 

: #007e7e; 

} 

a ： visi*ted 

{ 

dolor 

: #333333; 

} 


— <^^rpen your pencil 


Try your hand at calculating the specificity of these selectors using 
the cascade rules. Here’s the solution. 


hl.greentea 

0 1 1 

ol li p 

OOl 

em 

0 0 1 

p img 

00 Z 

.green 

0 1 0 

span.cd 

Ol 1 

a:link 

0 1 1 

#elixirs hi 

1 Ol 

#sidebar 

1 0 0 
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% 


Arranging Elements 





It’s time to teach your HTML elements new tricks, we re not 

going to let those HTML elements just sit there anymore — it’s about time they get 
up and help us create some pages with real layouts. How? Well, you’ve got a good 
feel for the <div> and <span> structural elements and you know all about how the 
box model works, right? So, now it’s time to use all that knowledge to craft some real 
designs. No, we’re not just talking about more background and font colors — we’re 
talking about full-blown professional designs using multicolumn layouts. This is the 
chapter where everything you’ve learned comes together. 


this is a new chapter 



examining a two-column page 


Pid you do the Super Pram Power? 


If you didn^ do the • 苣 ， at 
the end of the last chapter, then march right back 
there and do it. It’s required. 

Okay, now that we have that out of the way, at the 
end of the last chapter, we left you with a bit of 
a cliff-hanger. We asked you to move the elixirs 
<div> up under the logo, and then add one little 
property to the elixirs rule in your CSS, like this: 


float: right; 




And, wow, what a difference one property can 
make! All of a sudden, the page has gone from a 
fairly ordinary-looking web page to a great-looking 
web page with two columns. It’s immediately more 
readable and pleasant to the eye. 

So what’s the magic? How did this seemingly 
innocent little property produce such big effects? 
And can we use this property to do even more 
interesting things with our pages? Well, of course, 
but first, you’re going to need to learn how a 
browser lays out elements on a page. Once you 
know that, we can talk about all kinds of ways you 
can alter how it does that layout, and also how you 
can start to position your elements on the page. 

Here’s the good news: you already know about 
block elements and inline elements, and you 
even know about the box model. These are the 
real foundations of how the browser puts a page 
together. Now all you need to know is exactly how 
the browser takes all the elements in a page and 
decides where they go. 


## O O Head First Lounge 


| ◄ | ► ] | + |0filp ： ///fhApt^rl l/loungp/lour>ge.hrml 

(5 IYq^ Googlp 



Head First 


Lounge 


Weekly Elixir 
Specials 


Lemon Breeze 

The ultimate healthy drink, 
this elixir combines herbal 
botaniruls, minwiils, and 
vitamins with a twist of 
lemon Into a smooth citrus 
wonder that will keep your 
immune system going all 
dny And all night. 


霤 


Welcome to the Head First Lounge 

Thft Mend Hr^t Lounge \% t no doubt, the higg^t tr^nds^tt^r in Wehville. Stop in 
to sample the eclectic offering of elixirs, teas, and coffees, or, stay a bit longer 
and enjoy the multicultural culinary menu that combines a harmony of taste, 
texture, and color with the best in fresh and healthy ingredients. 

During your stay dt the lounge, you'll enjoy a smooth mixture of ambient and 
mystic sounds, filling the lounge and adding an extra dimension to your dining 
ftxperiftnrft. Thet dwtor surround^ you with thft rHaxing sentiments of %ightx 
from eras past. And, don’t forget, the lounge offers fre« wireless access to the 
Internet, so bring your laptop. 


Uur guarantee: at the lounge, we're committed to providing you, 
nur guest, with an e.xcr.ptinnnl experiencF. every time ynu vixit. 
Whether yvu'rv jwU sluppiny by tu in un email ouer an elixir, 

or are here for an out-cf-the-ordinary dinner, you'llfind our 
knowledgeable service staffpay attention to every detail. If you’re 
not fully satisfied, have a Blueberry Bliss Ehxiron us. 


But that's not all; at night, join us in the backroom as our resident DJ spins a 
chnicft sHertion of trnnr^ nnd drum Ah am arrows f>ur ^pAdous tiki-themed 
dance floor. Or just hang out in one of our comfy white vinyl booths at the 
dance bar. You can have your elixirs delivered from the mam lounge nght to the 
dance floor. If you've had enough of the beat, just head back to the lounge area 
to relax. And, no matter where you find yourself in the lounge, you'll always be 
ronnftrt^d with our wirelMs Internet nrrftw. 

Now that you've experienced the lounge virtually, isn't it time to check us out 
for reaH We're located right in Che heart of Webville, and we've created some 
detailed directions to get you here in record time. No reservations necessary; 
come and join us anytime. 

What's playing at the Lounge 

We're frequently asked about the music we play at the lounge, and no wonder, 
it's grp«t stuff. Jurt for you, we a list on th&. site, updut^d w^kly. 
Enjoy. 

• Buddha Bar, Claude Challe 

參 When It 「 all， t Zero 7 

• Earth 7, L.T.J. Buk«m 

• Lc Roi Est Mort, Vive Lc Roi!, Enigma 

• Music for Airports, Brian Eno 


® 20\2, Mead Hrst Lounge 

All trademarks and registered trademarks appearing on this site are the property of their respective owners. 


Chai Chiller 

Not your traditional chai # 
this elixir mixes mate with 
chai spices and adds an 
extra rhorolatft kirk for « 
caffcinatcd taste sensation 
on ice. 


Black Brain Brew 

Want to boost your 
memory? Try our Black 
Brain Drew elixir, m»de with 
black oolong tea and just a 
touch of espresso. Your 
brain will thank you for the 
boost. 

Join us any evening for 
these and all our other 
wonderful elixirs. 
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layout and positioning 


Use the Flow, Luke 

The Flow is what gives a CSS master his power. It’s an 
energy field created by all living things. It surrounds us 
and penetrates us. It binds the galaxy together.. .oh, sorry. 


Flow is actually what the browser uses to lay out a page 
of HTML elements. The browser starts at the top of any 
HTML file and follows the flow of elements from top to 
bottom, displaying each element it encounters. And, just 
considering the block elements for a moment, it puts a 
linebreak between each one. So the first element in a 
document is displayed first, then a linebreak, followed by 
the second element, then a linebreak, and so on, from the 
top of your file to the bottom. That’s flow. 


H a little w abbv-cviatcd w ttT/WL. 


<html> 

<head>... 

</head> 

<body> 

<hl>. 

..</hl> 

<h2>. 

..</h2> 

<p>.. 

•</p> 

<h2>. 

..</h2> 

<p>.. 

•</p> 

<p>.. 

•</P> 

<p>.. 

•</p> 

</body> 

</html> 


/W kvVs 七 he HTML ^lo>wcd 
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playing with flow 


Hcvc^ youv Flo>w 
tKc blodk clcmCir\*U m 

W |owr^.lvt 州 I” Kcv-C- 



BE th^ Br^ei 

Open your 'lounge .htitiF file and locate 
all the block elements. Flow each one on 
to the page to the left. Just concentrate 

on the block elements 
nested directly inside Ae 
body element. You can also 
ignore tke “floaf’ property 
in your CSS because you 
don’t feow does yet. Check your 

answer before moving on. 
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layout and positioning 


What about mime dcmewts? 

So you know that block elements flow top to 
bottom, with a linebreak in between each element. 
Easy enough. What about the inline elements? 

Inline elements are flowed next to each other, 
horizontally, from top left to bottom right. Here’s 
how that works. 


ttcvVs aho*tKc\r little 
shipfci o-f ttT 亂 . 






|-f Wt -take ml'mc 

^is <\» t\t^i 

a^d -flow i-t onto i\\t 
sta^r-t a-t -to? 


<p> 


Join us <em>any evening</em> for 
these and all our other wonderful 

<a href= n beverages/elixir. 
html n title="Head First Lounge 
Elixirs n >elixirs</a>. 

</p> 





The mime el e 你⑶ ts a 代 laid -to o^c 

ay\o*t^cV" Kovizx»r\*t3llY ； 3s as *t^cv-c is 
V*oow» oir\ "tV>C *to 



p 





text 


em 


text 

a 








So >w^at i-f >wc make tKc bvowsev v/'mdov/ 

a little iiv 鳴 OV wc \rcdutc tv>c siz_c of 

七 he doyvtcyvt avea v/itii width ^vo^cvtY? 

TVn -t^eve s less \room bo flate tv>c ’mime 
elements m. Let's see Kow 七 Wis works. 


Now 七 he dojvtetvt lias been -flowed Ic-ft *to 
until no mo\rc voom, dhd 

七 lie dojvtejvt is pladcd on 七 he nc>c*t Imc- Notice 
七 lie bv-owsev- Kad -to break *tKc up a little 
di-f-fcv-cirvtly *to make i 七 *fi 七 widely. _ _ ^ 


\\ 7^7 

ttev^ "thcvVs voom b> -fit all the mime 
elements hov-izon-tally. /Voiidc that 
is a s^cdial dasc o( an mime clcmc^-t. TKc 
bvoy/sev- bveaks i*t m*to ihl'mc elements 
ave ilic \riglii siz« -to -fi-t -the spade. 


P 


text 

em 

text 




text 

a 





i-f we make *tiic dov\*tctvt a\rea even -tiimhcv-, 
look wliat Kafpcirvs. The bv-owsev- uses as many lines 
as hcdcssav-y -to -flow 七 lie dotvle ^ 七 m*to 七 he spade. 


P 



text 




em 


text 




text 




text 


a 
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how flow works 


How it all works together 

Now that you know how block and inline elements are 
flowed, let’s put them together. We’ll use a typical page 
with headings, paragraphs, and a few inline elements like 
spans, some emphasis elements, and even images. And we 
can’t forget inline text. 

S*b 3 V"tlir»^ >Nl"tV\ 3 bvo>Nscv 
v/nr\diov/ s vcsiz^d "to 
a -fa'ivly >widc Width. 



4 


EatK blotk element is 

-floy/cd *bo bottom 
as youdi e 平 t 七， W» 七 h a 
Imeb^edk m beWo eaA. 



/W 七 he mime 
clcmcirrU avc 
-flowed -fv-om 七 lie 
{jo\ Ic-ft {jo 七 he 
bottom vijKt 
o( tKc element’s 
dor\*tcir\*t avea- 


|*f 七 lie mime dohtent c^f cadK blodk *fi*ts 七 he 
y/idtK o( 七 lie donten 七 3^rc3, 七 lien it’s pladcd 
tKeve ； otKcvy/isc, move vevtidal voom is made -fov 
the dohtent its dontmued or) tKc line. 


Heve, y/eve resized bvov/sev 
Wmdiov/, s^ucczjy»5 all tiic 6ovrben 七 
•m*to a smaller V^izoirrbal si«. 


Tliinjs -fl ow *Bic same y/ay, altiioujii "m 
some glades, tlic mlirvc elements take 
up move vcvtidal lines -to -fit 



hi ^ —— 

text \J 

text 



h2 text 


p 


f~text 

i 

text 飞 



h2 


text 




span 1 「 em f~ipan 


em 


text 


text 




text 


\ 


text 



fslovj blotk elements take 叶 
more vcvtital voom because 七 he mime 

V^as bo mto a smaller 

Kovizjo^t^l s^3tc- 
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layout and positioning 


One more thing you should know about flow and boxes 

Let’s zoom in just a bit and look at one more aspect of how the browser lays 
out block and inline elements. It turns out that the browser treats margins 
differently depending on which type of element is being placed on the page. 

When the browser is placing two inline 
elements next to each other... 



When the browser has the task of placing two inline elements side by side, and 
those elements have margins, then the browser does what you might expect. It 
creates enough space between the elements to account for both margins. So, 
if the left element has a margin of 10 pixels and the right has a margin of 20 
pixels, then there will be 30 pixels of space between the two elements. 


I I Bl~| 

I I — 

^_. 


Hcvc v/c’vc 30 七 *bwo images side by 
side, and images avc displayed as mime 
elements by dc-fault £o, tKc bvoy/sev 
uses botK o( 七 iiciv mav-gms io daldulatc 
七 he s^adc 七 ha 七 joes between -tKcm. 


When the browser is placing two block 
elements on top of each other... 


Here’s where things get more interesting. When the browser places two block 
elements on top of each other, it collapses their shared margins together. The height 
of the collapsed margin is the height of the largest margin. 


iVKcn bvoy/sev 


glades two blodk 
elements on -top 
o( eadK 。七 iicv, i 七 
dollapscs tKciv 


mav^ms. 





TKciv slaved nr»av-g'm is 
siz^ o( tKc lav-jcv 
o( 七 lie two mavjms. 

bottom mavjm is \0 
pixels, and tKc bot-fcom 

elements -top 州 avgm 

is ZO pixels. TKcir\ 
dollapsed mavg'm will be 
2-0 pixels. 
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questioning margins 


tJiereiare no ^ 

Dumb Questi9ns 


So if I have a block element with a zero margin, and a 
block element below it with a top margin of 20, the margin 
between them would end up being 20? 

Right. If one of the margins is bigger, then the margin becomes 
the larger of the two, even if one margin is zero. But if the margins 
are the same, say, 10 pixels, then they just get collapsed together to 
10 pixels total. 

Can inline elements really have margins? 

They sure can, although you’ll find that you often don’t set the 
margins of inline elements. The one exception is images. It is very 
common to not only set margins but also borders and padding on 
images. And while we aren’t going to be setting any inline element 
margins in this chapter, we will be setting the border on one a little 
later. 


What if I have one element nested inside another and they 
both have margins? Can they collapse? 

Yes, that can happen. Here’s how to figure out when they will: 
whenever you have two vertical margins touching, they will collapse, 
even if one element is nested inside the other. Notice that if the outer 
element has a border, the margins will never touch, so they won’t 
collapse. But if you remove the border, they will. This is sometimes 
puzzling when you first see it happen, so put it in the back of your 
mind for when it occurs. 

So how exactly does text work as an inline element since 
its content is not an element? 

Even if text is content, the browser needs to flow it onto the 
page, right? So the browser figures out how much text fits on a given 
line, and then treats that line of text as if it were an inline element. 

The browser even creates a little box around it. As you’ve seen, if you 
resize the page, then all those blocks may change as the text is refit 
within the content area. 



Weve been through seven pages 
of、、f low.” When are you going to 
explain that one little property we put 
into our CSS file? You know, the 

float ： right; 


To understand float, you have to understand flow. 

It might be one little property, but the way it works is closely tied to 
how the browser flows elements and content onto the page. But hey, 
you know that now, so we can explain float. 

Here’s the short answer: the float property first takes an element 
and floats it as far left or right as it can (based on the value of float). 
It then flows all the content below it around the element. Of course 
there are a few more details, so let’s take a look... 
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layout and positioning 


How to float aw element 



Now give it a width 

A requirement for any floating element is that it 
have a width. We’ll make this paragraph 200 pixels 
wide. Here’s the rule: 


#amazing { 

width : 200px; 


r 


|\(o>n i\\t pavaya 汴 is 2.00 _cls 
wide, 如 d 七 he ml'mc 6o>rv 七⑶七 

m adjusted *to 七 ha 七 

wid 七 iv 心叶 m mmd, ^avaya^ 

is a blotk clcrwcnt, SO yvo elements 3VC 
*to move beside i"t bcd.3usc 3ll 
blotk clcm^ts have Imcbvcaks bcW 



a^\d a-ftev- 七一 . 
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how float works 


Now float it 

Now let’s add the float property. The float 
property can be set to either left or right. Let’s 
stick with right: 

#amazing { 

width : 200px; 
float: right; 


Now that we’ve floated the “amazing” paragraph, 
let’s step through how the browser flows it and 
everything else on the page. 

(I) Pi vs 七七 lie bvoy/sev -fl ov/s 七 lie 
elements oy\ 七 lie as usual ； 

at 七 he *top o-f 七 he -file and 
moving *fco>wav-di tKc bottom. 



{ hi \ 

text 

\ 



h2 text 

] 




p id=“amazing 





(2J 1/VliCh "BiC b\rowsc\r Chfiouh'tcvs 
the -floated elemeivt, *_七 places i-t all 
tKc y/ay -to the \rijKt li also removes 
iKc fav-agv-aph -fv- *tKc -flow ； like 
-floa-tihj oh -tKc pay. 


G) Because floated paraya 卟 

has been amoved -fvom 七 ^ normal 
-f|o>w, blotk elements avc ttlcd m, 
like 七 he is〆 七 ev ⑶七 heve. 


( 午 ） But y/Kcn 七 lie mime eler^eirrls 
positioned, {hej ves^edt tKc 
bouhdavics o-f tKc -floated element 
£o tKey av-c -fI oy/cd avou^d it- 


hi \ 

text \ 、 

h2 text 




p id=“amazing’ 






span em 


| span em 



P 




img 


img 

img 

img 





Ko*bitc *b^a*t 
blotk clcrwcr»*ts avc 

^>os'»*b»oir\cdi undev 

i\\t -floated element 
That's because i\\t 
-floated clcr»\Cir»*b IS Y\0 

lonyv- \>a\rb o( ttc 
^OV'Vwdl *Ho>N. 


However, whch -the 
ihlihe clcnr>cir»-fes av~e 
•Plowed wi-tKih -tKc 

Wo 亡 k clcrmehis, -feKey 

•Plow dlrouhd "tKc 
bomdems of -the 
clcnr>CK>'{：. 
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layout and positioning 


Pehmd the scenes at the lounge 

Now you know all about flow and how floated elements 
are placed on the page. Let’s look back at the lounge 
and see how this all fits together. 


Remember ih addition "to scitihj the 
elixivs <div> -fco -float wc also 

… oved iKc di^i\rs <div> up jusi below 
the logo at tlic -top o-f -tKc pay. 


/Vjov'm^ iKc <div> allov/cd us {o -floai i*t *to iKc 
v-ijKi av\d iKch Kavc iKc ⑼七 i\re fajc -flov/ av-ou^d 
it- v/c Kad Ic-fi cli^ivs <div> bclo>w iKc musit 

V-edommer\daiioy\s ; iKc elixivs v/ould Kavc bccir\ _ —— 

floated vigivt 3-f"tcV" most Ksd been ^ladcd- Welcome to the Head First Lounge 



Head First I ounge 


^hle:///chapterll/lounge/lou ngc.html 


_ Head First . 

Lounge 



AU *tV>CSC dcmC>r\*ts -follow 

di'/.ivs m i\\t HTML, so i^cy 
av-c -floy/cd avound i 七 . 


Rcmcmbcv- 七 ha 七七 he cli^ivs <div> is -floatmj 
OY\ bo^ o( 七 he fage. All tKc 。七 hcv clcrwcnts 
avc i*t> but tKc inlmc 

vcspcd*ts -tKc di%ivs, bouhdavits y/Kcn *t^cy 
avc -floy/mg iirrto 七 he page- 



The Head Hrst Lounge \\ no doubt, the biggest trend^ttw in 
Webville. Stop in to sample the eclectic offering of elixirs, teas, and 
coffees, or, stay a bit longer and enjoy the multicultural culinary menu 
that combines a harmony of taste, texture, and color with the best in 
fresh and healthy ingredients. 

During your stay at the lounge, you'll enjoy a smooth mixture of 
ambient and mystic sounds, filling the lounge and adding an extra 
dimension to your dining ^xp^rience. Thft decor surrounds you with 
the rHAxing of sights from was past. And, don't forget, 

the lounge offers fiee wirele?» access to the Intei net, so bring your 
laptop. 


Our guarantee; at the lounge, we're oonvnitted to 
providing you, our guest, with an exceptional experience 
every time you visit. Whether you're just stopping by to 
check in on email over an elixir, or are here for an out-of- 
tlwMinhfHiry tlinrwr, ynuVfind nurbnnulM]yi*ahlF. 
service stqffpay attention to every detail, ff you're not 
fully satisfied, have a Blueberry Bliss Elixir on us. 


But that's not all; at night, join us in the backroom as our resident DJ 
spins a choice selection of trance and drum&bass beats across our 
spacious tlki-themed dance floor. Or just hang out in one of our comfy 
white vinyl booths at the dance bar. You can have your elixirs 
delivered from the mam lounge right Co the dance floor. If you’ve had 
^nough of the beat, just head back to the lounge area to relax. And, 
no matter where you find yourself in the lounge, you'll always be 
connected with our wireless Internet access. 


Now that you've experienced the lounge virtually, isn't it time to check 
us out for real? We're located right in the heart of Webville, and we've 
created some detailed directions to get you here in record time. No 
reservations necessary ； come and join us anytime. 


Also v\o{：\tt -tKai i\\t v/ra 尸 
avoomdl 七 he bo*t*tom o( cliWiVS, 

because is tonia’med m a 

blodk clcmcy\*t 七 ha 七 is 七 k W\d{}\ o( 

七 k page- l-f youvs docs^i v/v-ap, iv-y _ 
youv bv-ov/sev- v/'mdov/ until 
i\)t it%i v/v-a^>s uy\dcv-^catii iiic cli%iv-s. 


What's playing at the Lounge 


Weekly Elixir 
Specials 




Lemon Breeze 

The ultimate healthy drink, 
this elixir combines herbal 
botaniciils, minerals, and 
vitamins with a twist of 
lemon into a smooth citrus 
wonder that will keep your 
immune system going all 
day and all night. 


喔 


Chai Chiller 

Not your trnditionAl chni, 

this elixir mixes mate with 
chai spices and adds an 
extra chocolate kick for a 
cdffeinated taste sensation 
on ire. 


i 


Black Brain Brew 

Want to boost your 
memory? Try our Black 
Brain Brew elixir, made with 
blark oolong ten and iu^t a 
touch of espresso. Your 
brain will thank you for the 
boost. 

Join us any evening for 
these and all our other 
wonderful elixirs. 


We're frequently asked about the music we ploy at the lounge, and no 
wonder, it's great stuff. Just for you, we keep a list here on the site, updated weekly. Cnjoy. 

• Buddha Bar, Claude Challe 

• When It Falls, Zero 7 

• Earth 7, L.T.J. Bukem 

• LC Rot Est Mort, Vive Lc 尺 0/7, I 

• Music for Airports, Brian Eno 


® 2012, IlMd rirst Lounge 

All trademarks and registered trademarks appearing on this site are the property of their respective 


owners. 
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a new assignment: starbuzz 




Move the elixirs <div> back to its original place below the main content, then save 
and reload the page. Where does the element float now? Check your answer in the 
back and then put your elixirs <div> back underneath the header. 


Nice stuff. Do you think I*m going to 
watch these fantastic lounge designs 
and not want you to improve Starbuzz? 
Youve got a blank check...take 
Starbuzz to the next level. 



It looks like we’ve got a new assignment. Starbuzz 
really could use some improvement. Sure, you’ve 
done a great job of creating the typical top-to- 
bottom page, but now that you know flow, you 
should be able to give Starbuzz Coffee a slick new 
look that is more user-friendly than the last design. 

We do have a little secret though.. .we’ve been 
working on this one a bit already. We’ve created 
an updated version of the site. Your job is going 
to be to provide all the layout. Don’t worry, we’ll 
bring you up to speed on everything we’ve done so 
far — it’s nothing you haven’t seen before. 
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The new Starbuzz 


Let’s take a quick look at what we’ve got so 
far, starting with the page as it looks now. 
Then we’ll take a peek at the markup and 
the CSS that’s styling it. 


-fouv- scdtioy\s ： tiiC 

a ma'rn settlor, a settlor 

advcv-tismj somc-tiimj ^C>w dolled 七 he 
w Bcay\ MaAme," 扣 d a -foo-tev-. 


Bach section is a <div> tKa*t dan 
be s 七 yled 'mdc^c^dch*tly- 乂 


I 七 looks like v/c ; vc 30 七 one 
badkyroimd dolov -fov *tKc 
pay as a >wKolc, and *tKcn 
eadli <div> is usm^ dyt imd^C 
as a bddkgirouirtd- 


Wc'vc Jo-t a deader ^ a now spi^y StarWzi I030 and 七 k 

^om^a^y mission s*ta 七亡州⑶七 .This is actually jus-b 為今 IP “y. 



I 十 i Of1le:///chapterll/starbuzz/index.html 



Sf^Hbtizz 
v> Coffee 



Sldrbuzz Coffee 


C ] (Q，Google 


3 


...providing all the caffeine 
you need to power your 
life, just drink it. 


QUALITY COFFEE, QUALITY CAFFEINE 


At Starbuzz Coffee, ’ 


rc dedicated to filling all your caffoinc needs through our quality coffocs and teas. Sure, vve want you 
to have a great cup of coffee and a great coffee experience as well, but we're the only company that actively monitors and 
optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean Machine online order form, and get 
that quality Starbuzz coffee that you know \>dD meet your caffeine standards. 


And, did we mention caffeine? We've just started funding the guys doing all ih< 
you want the latest on coffee and other caffeine products, stop by and pay thcr 


OURSTORY 


c wonderful research at the Caffeine Buzz. If 
a visit. 


ip of coffee. Starbuzz's 


Hcv-c ; s tKc w Bcar» MadlVmc’’ a\rea- This links b> 
a wcw av-ca o-f £*ta\rbuzi Co((cc you 
ovdev- you\r doWee bea^s o^l'mc. This Imk docsv /七 
wo\rk jus 七 yet because youVe jo'mj *to build the 
Ala^K'mc m updomiy^ dhaptcv*- 



•’A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted in a damn good < 

CEO is that man, and you already taiow his plan: a Starbuzz on every corner. 

,Tn only a few years he's executed that plan and today you can enjoy Starbuzz just about anywhere. And, of course, the big news 
this year is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence, wl 


helping to meet the caffeine needs of a whole new set of customers. 
STARBUZZ COFFEE BEVERAGES 


,which is growing rapidly and 


We've got a variety of caffcinatcd beverages to choose from at Starbuzz, mdudmg our House Blend, Mocha Cafe Latte, 
Cappuccino, and a favorite of our customers, Chai Tea. 

We also offer a variety of coffee beans, whole or ground, for you to take home with you. Order your coffee today using our 
online 13can Machine, and take the Starbuzz Coffee experience home. 



ORDER ONLINE with the BEAN MACIIINE 
FAST 
FRESH 

TO YOUR DOOR 


Why wait? You can order all our fine coffees right from the Internet with our new, i 
work? Just click on the ik^an Machine link^ enter your order, and behind the scenes, 
want), packaged, and shipped to your door. 


mated Bean Machine. I low docs it 
i\r coffee is roasted, ground (if you 


\ aoia, Star] 
ippearinKOi 


•buzz Coffee 


All trademarks and registered trademarks appearing on this site are the properly altheir respective owners. 


ttevVs 七 lie -footer. |*t does〆 七 
use d b3dk0\rouwdi jus*t 3 
bddk^\rouir\di dolov. 



Notide 七 ha 七 styled 七 he 

links \y\ mtcv-cstmj way ； 
v/rth dotted undcv-lihCS... 


you are here ► 


483 






















looking over the markup 


A look at the markup 


Now let’s take a look at the new Starbuzz markup. We’ve taken each of the logical sections and 
placed it into a <div>, each with its own id. Beyond the <div>s and <span>s, there’s really 
nothing here that you hadn’t already seen by about Chapter 5. So, take a quick look and get 
familiar with the structure, and then turn the page to check out the CSS style. 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= M utf-8 M > 

<title>Starbuzz Coffee</title> 

<link type= M text/css M rel="stylesheet' 
</head> 

<body> 

<div id= M header M > 

<img src= M images/header.gif" alt: 
</div> 


ftcvVs all tlic usual 
HTML adrwmis-tv-avia... 


href="starbuzz.css M > 


Starbuzz Coffee header image"> 


… "follov/ed toy a <d'»v> -fov- 

七 iicadcv- a <dw> 

-fov- 七 he ma'm doyrte 灼七 avca* 



\/ 


<div id= M main M > 


<hl>QUALITY COFFEE, QUALITY CAFFEINE</hl> 

<p> 

At Starbuzz Coffee, we are dedicated to filling all your caffeine needs through our 
quality coffees and teas. Sure, we want you to have a great cup of coffee and a great 
coffee experience as well, but we're the only company that actively monitors and 
optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean 
Machine online order form, and get that quality Starbuzz coffee that you know will meet 
your caffeine standards. 

</p> 

<p> 

And, did we mention <em>caffeine</em>? We've just started funding the guys doing all 
the wonderful research at the <a href= M http://buzz.wickedlysmart.com" 
title= M Read all about caffeine on the Buzz M >Caffeine Buzz</a>. 

If you want the latest on coffee and other caffeine products , 
stop by and pay them a visit. 

</p> 

<hl>OUR STORY</hl> 

<p> 


"A man, a plan, a coffee bean". Okay, that doesn't make a palindrome , but it resulted 
in a damn good cup of coffee. Starbuzz's CEO is that man, and you already know his 
plan : a Starbuzz on every corner. 

</p> 

<p> 


In only a few years he's executed that plan and today 

you can enjoy Starbuzz just about anywhere. And, of course, the big news this year 
is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence, 
which is growing rapidly and helping to meet the caffeine needs of a whole new set of 


customers. 


</p> 

<hl>STARBUZZ COFFEE BEVERAGES</hl> 

<p> 

We've got a variety of caffeinated beverages to choose 
from at Starbuzz , including our 
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This is moV-C ma'm 60 於七⑶七 

avcd to^tmucd ovcv hcvc. 

<a href= M beverages.html#house M title= M House Blend">House Blend</a>, 

<a href= M beverages.html#mocha M title="Mocha Cafe Latte ">Mocha Cafe Latte</a>, 
<a href= M beverages.html#cappuccino M title= n Cappuccino n >Cappuccino</a>, 

and a favorite of our customers, 

<a href= M beverages.html#chai M title="Chai Tea M >Chai Tea</a>. 

</p> 

<p> 

We also offer a variety of coffee beans , whole or ground, for you to 
take home with you. Order your coffee today using our online 

<a href= M form.html M title= M The Bean Machine ">Bean Machine</a>, 

and take the Starbuzz Coffee experience home. 

</p> 

</div> 



<div id= M sidebar"> 

<p class= M beanheading M > 

<img src = M images/bag.gif" alt= M Bean Machine bag M > 

<br> 

ORDER ONLINE 
with the 

<a href="form. html">BEAN MACHINE</a> 

<br> 

<span class= M slogan"> 

FAST <br> 

FRESH <br> 

TO YOUR DOOR <br> 

</span> 

</p> 

<p> 

Why wait? You can order all our fine coffees right from the Internet with our new, 
automated Bean Machine. How does it work? Just click on the Bean Machine link, 
enter your order, and behind the scenes, your coffee is roasted, ground 
(if you want ), packaged, and shipped to your door. 

</p> 

</div> 


■nai 

jivcw ； id o*f w sidcbav* • Hmm, 
\Nov\dty 七 hat toM mean? 


<div id= M footer"> 

&copy; 2012 , Starbuzz Coffee 

<br> 

All trademarks and registered trademarks appearing on 
this site are the property of their respective owners 

</div> 


</body> 

</html> 



J\y\A -f'mally, >wc -tiic <dw> 七 ha 七 

makes iiic -footev 


you are here ► 
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beginning starbuzz style 


And a look at the style 

Let’s get a good look at the CSS that styles the new Starbuzz page. Step through 
the CSS rules carefully. While the new Starbuzz page may look a little advanced, 
you’ll see it’s all just simple CSS that you already know. 


body { 


background-color 
font-family: 
font-size : 
margin : 


#header { 

background-color : 
margin : 
height : 


#b5a789; 
Georgia , 
small; 
Opx; 


#675c47 

lOpx; 

108px; 


Times New Roman ", Times , serif 


Fiv-s-t, v/c just srt up 
some bdsids'm body : 
a badkyound tolov- and 

•fo 灼 is, and v/e also sti 

rnav-g'm o-f body *to 0. 
This makes suv-c 七 Vive’s ⑽ 

voom avou^d 
djcs o-f iiic pay. 


c 


#main { 


background : 
font-size : 
padding : 
margin : 


#sidebar { 

background : 
font-size : 
padding : 
margin : 


#footer { 

background-color : 
color : 
text-align : 
padding : 
margin : 
font-size : 


#efe5d0 url(images/background.gif) top left; 
105%; 

15px; 

Opx lOpx lOpx lOpx; 




#efe5d0 url(images/background.gif) bottom right; 
105%; 

15px; 


hi 


font-size 
color : 


.slogan { color : 

.beanheading { 

text-align : 
line-height 



center; 


>wc a v-ulc -fov¬ 
ea^ logical settlor. \y\ 
cadii, v/cVc iv/cak'mj 七 he 

•fo 的七 siz^, addi'mg 

mav-jms dv\di also — m 

d3sc o-f ma'm 扣 d 
i\\t sidebav—spcti-fy'mj a 
batkyouhdl imay- 



used as v/cll- 


center; 
1.8em; 
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a:link { 

color : 

text-decoration : 
border-bottom : 


Fov* l 3 st *t>wo vulcs m £*t 3 v-buz^- use 

"""" 3 ： |iy\k dy\d a ： visi*tcd pseudo—d-Usscs *to style "tV^C I'mks. 

#b76666; 》 

none ； ^ Wt\-t verwovi^j ilic dc-fauli uhdcvlmc iKat I'mks gei by 

thin dotted #b76666; scitmg tc^-dcdovatioh h> ⑽ he. Instead... 


a 


visited { 


color : 

text-decoration : 
border-bottom : 



#675c47; 
none ; 

thin dotted #675c47; 



settihj iKc bov-dc^-botiom 
only *fo\r iW\s <a> dcmchi 


aettihj a hide dotted uhdev-lihe 
c-f+c^t oh the |i h ks by usi^j a ddied 

bottom boirdc\r ihstcad c^f ⑽ d 饮 kc. 

This is a 3 ⑹七 o( usihj tKc WdtY 

P'ropcirty oh ihli^c eUeht 


Let's take Starbuzz to the wext level 


Here’s the goal: to turn Starbuzz Coffee into the site on 
the right. To do that, we need to move the Bean Machine 
sidebar over to the right so we’ve got a nice two-column 
page. Well, you’ve done this once already with the lounge, 
right? So, based on that, here’s what you need to do: 

Give the element you’re going to float a unique 
name using an id. That’s already done. 

Make sure the element’s HTML is just below 
the element you want it to float under — in this 
case, the Starbuzz header. 

Set a width on the element. 

Float the element to the left or the right. It looks 
like you want to float it right. 


O 

❹ 

❺ 

o 


Let’s get started. In a few simple steps, we should have the 
Starbuzz GEO sending a few Ghai Teas over on the house. 


I H O Starbu 22 Coffe# 

<1 ► 


StaHbuzz 

/Coffee 


QUAIJTY COFFRF” QUAIJTY CAFFEINE 

At Starbuzz Coffee, wc are dedicated to fillio^all your ctffcine needs 
through our quality a>ffccs and teas. Sure, we wtnt you to hjve 纛 grcit cup 
of coffct and 丨 great coffee experience as well, hut we’re the only company 
that actively monitors And optiraizn caffeine level*. So stop by and f31 your 
cup, or order online v*ith our new Bean Machine online order form, and get 
thAt quality SUrbuzz coffee that you know will rotti your caffeine 

And, did wc mcotk>n cofftiml WcSx just stilted funding the guyt doioft ill 
the woodcrful rcscardiit tbo Ciffcmc you want the latest oa ooffee 

and other caffeine producU, stop by and pay them a visiL 

OURSTORY 

"A man. a pUn, a coffee bean". Okay, tkol doesn't moke a palindrome, but it 
resulted in a damn good cup of coffee. SUrbtcce's CCOb that man. and you 
already know his pUn: a SUrbvxz on every corner. 

In only 霾 few years he's executed that pUn and today you can «yoy surbuzt 
just about anywhere. And. of course, the b^g news this year is that SUrburz 
turned up with He^d First reaiders to crcAte Starbuzz's Web presence. 
■Mch to grewtagnpid^r and helping to meet the caffeine needs of amiiolc 


STARBUZZ COFFEE BEVERAGES 

Wc\t gal a variety of enffrinatni brvrraecsto choose from ol Slarbun^ 
including our Hciu i filrml, ym-hn Cnfr Ijitir, C-ipj) i. n u>, and a favorite of 
our customers, ChniTra. 

Wc >190 offer a variety of ooffee beans, whole or groundL for you to take 
home with yoa. Order >-our coffee today using our online M ,： i 

and Ukc Ux Starbuzz Coffee cxpcncocc bo me. 




...providing all the caffeine 
you need to power your 
life, just drink it. 


V 


ORDER ON1JNF.with ihc .\S MAfl IIX1 


FRESH 

TOYOIJRDOOR 


Why%«U?1 
right frarot 
natrd I 

on the Rmn Madiinc link, ettfr 
ordrr, and behind the semes, your 
coffee is roaslrd. ground (if >nu Hanl), 
packaged, and ship|ird to your door. 


t? You can order all our fine coffees 
I the Inlrrnrt with our new, 
automatrd Bmn Machine. How does it work? 
Just dkkon the Rran Machine link* c 


\MtNt 3 <>七 a hide "tv/o—dolumh look 
KcvC) >wi*tK disdvc*tc dolumns. 


you are here ► 
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moving the sidebar 


Move the sidebar just below 
the header 


It’s a fact of life that when you float an element, you 
need to move the HTML for the element directly below 
the element that you want it to follow. In this case, the 
sidebar needs to come under the header. So, go ahead 
and locate the sidebar <div> in your editor and move 
the entire <div> to just below the header <div>. 

You’ll find the HTML in the file “index.html” in the 


u chapter 11/starbuzz’’ folder. After you’ve done that and 
saved, reload the page. 

I^Ioyi sidebdv* should be ov\ 

七 ^ o*f 七 ma'rn 60 灼七⑶七 av*C 3 - 



Set the width of the sidebar 
and float it 



Let’s set the width of the sidebar to 280 pixels. And to float the 
sidebar, add a float property to “chapter 11/starbuzz.css’’，like this: 


1/VcVc us'mj ar\ id sclc^ bo sclcti 

id w sidcbav > y/hiC.ii >wc 

knovz is iiic <div> (or iiic sidebav-. 



#sidebar { 

background : #efe5d0 url(images/background.gif) bottom right; 


font-size : 105%; 

padding : 15px; 

margin : Opx lOpx lOpx lOpx; 

^—"'"X WcVc setti% o-f 

area b> ViO 卜 ds. 

weVe -Ploatmg sidebar h> ihis .oves 

上卜 s ” ^ 七犯 possible below the header ahd it also Amoves 

Cba，r , h0lrma H. else bdov/ iKc sidebav ir» iKc 

1 亂 1 s 3 0,h 3 ^ 州 ove uf ahd y/v-ap av-ouhd ii 



width : 

280px; 

float: 

right; 
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layout and positioning 


I have an idea. In the future, why 
don’t we float the main content to the 
left, rather than the sidebar to the right? 
Since the main content is already at the 
top, we wouldn’t have to move things 
around, and we get the same effect. 



That’s actually a great idea, but 
there are a couple of issues. 


On paper, this looks like a great idea. What 
we do is set a width on the main content 
<div> and float it to the left, and then let 
the rest of the page flow around it. That 
way, we get to keep the ordering of the 
page and we also get two columns. 


The only problem is, this doesn’t result in a 
very nice page. Here’s why: remember, you 
have to set a width on the element that you 
are going to float, and if you set a width 
on the content area, then its width is going 
to remain fixed while the rest of the page 
resizes along with the width of the browser. 
Typically, sidebars are designed to be 
narrower than the main content area, and 
often look terrible when they expand. So, 
in most designs, you want the main content 
area to expand, not the sidebar. 


But we are going to look at a way to use 
this idea that works great. So hang on to 
this idea. We’ll also talk a little more about 
why you’d even care what order your 
sections are in. 




testing the float 


Test driving Starbuzz 

Make sure you add the new sidebar properties to the 
“starbuzz.css” file in the “chapter 11/starbuzz” folder, and 
then reload the Starbuzz page. Let’s see what we’ve got". 


Hmm, tWis looks good, but 』 ^ 

you II see y/cVc ^oi to be- 


TKc m3'm 60 外七⑶七 3^d "tiiC 
sidebav avc oy \ tKc Ic-ft 
ar\d iKc vijiii, bui iiicy 
doh'i v-cally look like i>wo 
6olumy\s yc*t- 


Look a*t Kon 七 he 
batkjvou^d irways <Jc 
-tKc *bwo settlors just 

'eve’s 


vun -tojctiicv-. 

灼 o sc^av*atio>r» bc*bwccy» 

七 he C.olur»»^s. 



o^tarfewzz* 

fjCofftt 




QUALITY COFFEE, QUALITY CAFFEINE 

At Starbuzz Coffee, we are dedicated to filling all your caffeine needs through 
our quality coffees and teas. Sure, wc want you to have a great cup of coffee 
and a great coffee experience as well, but we're the only company that actively 
monitors and optimizes caffeine levels. So stop by and fill your cup, or order 
online with our new Bean Machine online order form, and get that quality 
Starbuzz coffee that you know will meet your caffeine standards. 

And, did we mention caffeine? We've just started funding the guys doing all the 
wonderful research at the Caffeine Buzz. If you want the latest on coffee and 
other caffeine products, stop by and pay them a visit. 

OURSTORY 

"A man，a plan, a coffee bean". Okay, that doesn't make a palindrome, but it 
resulted in a damn good cup of coffee. Starbuzz's CEO is that man，and you 
already know his plan: a Starbuzz on every comer. 

In only a few years he's executed that plan and today you can enjoy Starbuzz 
just about anywhere. And, of course, the big news this year is that Starbuzz 
teamed up with Head First readers to create Starbuzz's Web presence, which is 
^Tor^g^pidly and helping to meet the caffeine needs of a whole new set of 
customers. 

STARBUZZ COFFEE BEVERAGES 

variety of caffcinatcd beverages to choose from at Starbuzz, 

including i_i 7 T 1 .. _ ”"• Iiii I nlc Latte, Cappucdno, and a favorite of 

our customers, Chm Tea. 

We also offer a variety of coffee beans, whole or ground, for you to take home 
online Bean Machine, and take the Starbuzz Coffee experience home. 


.providing all the caffeine 
you need to power your 
life, just drink it. 


蜃 • 




# 


ORDER ONLINE with the 

FAST 

FRESH 

TO YOUR DOOR 

Why wait? You can order all our fine coffees 
right from the Internet with our new, 
automated Bean Machine. I low docs it work? 
Just dick on the Bean Machine link, enter 
your order, and behind the scenes, your 
coffee is roasted, ground (if you want), 
and shipped to your door. 


nackagcd, 


(oth you. Order your coffee today usingoj^ 


® 2012, Starbuzz Coffee ， 

All trademarks and registered trademarks appearing on this site are the property of their respective owners. 



七 e % 七 v/v-a^s av-ound and undev- 七 he sidebar, wKidK docs / 七 make 七 his 
look like 七 v/o dolumhS erBid ftmm, 七 ha 七 is dd-budlly Kow 七 he lou^je y/o\rkccl 
■too—maybe wc should Kavc -tKat. 
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Fixing the two - column problem 


At this point, you might be realizing that page layout is a bit of an art — we’ve 
got a set of techniques for laying out block elements, but none of them is 
perfect. So, what we’re going to do is solve our problem using a common 
technique that is widely used. It’s not perfect, as you’ll see, but in most cases 
it gives you good results. And after this, you’re going to see a few other ways 
to approach the same two-column problem, each with its own advantages. 
What’s important here is that you understand the techniques and why they 
work, so you can apply them to your own problems and even adapt them 
where necessary. 


T\\t -fivst *to 
VCw'Cw'bcv* is 
sidcbav is -floatmj oy\ 
i\\t pay. TKc mam 
6 。 灼 七⑼七 avea e% 七忧 ds 
all 七 he y/ay ⑽ dev it. 




nnn 


Starbuzz Coffey 


0flle:///chapterll/slarbuzz/index.html 


farfeiizz 


(r 



C Google 




...providing all the caffeine 
you need to power your 
life, just drink it. 


go, >/V>ai i-f jWc 七 & mam 
avea a v •吵七 mav-j'm 
is at least as bij as i\\t 
s'ldcbav? TKcyv i*U 60 灼七⑶七 Will 
almost -to tKc sidcbav, 

but not all >way. 


TKcn well Kavc sc^av-ation between 
*bwo, and s'mdc mavg'ms av-c 
■branspavch 七 dhd don’ 七 sKoy/ 七 lie 
bddk^vouhdi irma^e> 七 he badkjvound 
dolov c^f 七 he rUcl-f should sKow 

七 Wougiv f{r\d 七 hat’s y/Ka*t wcVc 
looking -fov (-flip badk a -fow pages 
and you’ll see). 


QUALITY COFFEE, QUALITY CAFFEINE 

\t Starbuzz Coffee, we arc dedicated to filling aU your caffeine needs through 
)ur quality coffees and teas. Sure, we want you to have a great cup of coffee 
inda great coffee experience as well, but we're the only company that actively 
nonitors and optimizes caffeine levels. So stop by and fill your cup, or order 
)nlinc with our new Bean Machine online order form, and get that quality 
Starbuzz coffee that you know will meet your caffeine standards. 

\nd, did we mention caffeine? We've just started funding the guys doing all th< 
vonderful research at the Caffeine Buzz. If you want the latest on coffee and 
)ther caffeine products, stop by and pay them a visit. 

3URSTORY 

A man, a plan, a coffee bean”. Okay, that doesn't make a palindrome, but it 
esulted in a damn good cup of coffee. Starbuzz's CEO is that man, and you 
ilready know his plan: a Starbuzz on every corner. 

only a few years he's executed that plan and today you can enjoy Starbuzz 
ust about anywhere. And, of course, the big news this year is that Starbuzz 
earned up with Head First readers to create Starbuzz's Web presence, which is 
growing rapidly and helping to meet the caffeine needs of a whole new set of 
rustomers. 

STARBUZZ COFFEE BEVERAGES 

A^eVe got a variety of caffcinated beverages to choose from at Starbuzz, 
nduding our 晚 ㈣ ， ^ppuedno, and a favorite of 

)ur customers, ChaiT 




ORDER ONLINE with the 

FAST 

FRESH 

TO YOUR DOOR 

Why wait? You can order all our fine coffees 
right from the Internet with our new, 
automated Bean Machine. IIow docs it work? 
Just dick on the Bean Machine link, enter 
your order, and behind the scenes, your 
coffee is roasted, ground (if you want), 
packaged, and shipped to your door. 


A^e also offer a variety of coffee beans, whole or ground, for you to take home with you .' 
)nline Bean Machine, and take the Starbuzz Coffee experience home. 


coff 1 today using ( 


© 2012, Starbuzz Coffee 

All trademarks and registered trademarks appearing on this site are the property of their 


s 




y/ide as 七 he sidebar. 


you are here ► 
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using margins for two columns 


^harpen your pencil 


What we want to do is set a right margin on the main content section so that it’s the 
same width as the sidebar. But how big is the sidebar? Well, we hope you aren’t already 
rusty since the previous chapter. Here’s all the information you need to compute the 
width of the sidebar. Check your answer in the back of the chapter. 


#sidebar { 

background : 
font-size : 
padding : 
margin : 
width : 
float: 


#efe5d0 url(images/background.gif) bottom right; 
105%; 

15px; 

Opx lOpx lOpx lOpx; 

280px; 

right; , 

leu’ll -rmdi you 

need *to y/idtli 

o-f sideba\r in tKis \rulc- 



Setting the margin oh the mam section 

The width of the sidebar is 330 pixels, and that includes 10 pixels of left margin on 
the sidebar, which will provide the separation we need between the two columns 
(what the publishing world calls a “gutter”). Add the 330-pixel right margin to the 
細 ain rule in your “starbuzz.css” file, like we’ve done below: 


#main { 

background : #efe5d0 url(images/background.gif) top left; 

font-size : 105%; 

padding : 15px; 

margin : Opx 33Opx lOpx lOpx; 

} .V 

WcVc 七 he vi# 七 mavgrn 七 o ZZO pixels 

h> matdK 七 he s\-zjc. o( 七 he sidebav. 


492 


Chapter 11 







layout and positioning 


Test drive 



As usual, save your “starbuzz.css” file and then 
reload “index.html”. You should now see a 
nice gutter between the two columns. Let’s 
think through how this is working one more 
time. The sidebar is floating right, so it’s been 
moved as far to the right as possible, and the 
whole <div> has been removed from the 
normal flow and is floating on top of the page. 
Now the main content <div> is still taking 
up the width of the browser (because that’s 
what block elements do), but we’ve given it a 
margin as wide as the sidebar to reduce the 
width of the content area. The result is a nice 


two-column look. You know the box of the 
main <div> still goes under the sidebar, but 
we won’t tell anyone if you don’t. 


By 七 he mavj'm 

o\ iKc mdrn <div>, >wcVc 


StaHbuzz 

TCoffee 


.providing all the caffeine 
you need to power your 
life, just drink it. 



QUALITY COFFEE, QUALITY CAFFEINE 


At RtArhii7j ： Cxiffee, wr. Are dedicated to filling aII your caffeine nerds 
through our quality ooffocs and teas. Sure, wo want you to have a jircat cup 
of coffee and a great coffee experience as well, but wc'rc the only company 
thiit actively monitors anH optimizes cflffpine Irvcl.s. So stnp hy and fill your 
cup f or urdur uiilliu; with uur avw Bcaii Madiinu uuliue order furui, and get 
that quality Storbuzz ooffee that you know will meet your caffeine 
standards. 


AnH, Hid wp mfintion enffeine? Wc'vp just start pH funding the guys doing all 
the wonderful research at the Caffeine Buzz. If you want the latest on ooffoc 
and other caffeine products, stop by and pay them a visit. 

OURSTORY 


"A man, a plan«a ooffee bean”. Okay, that doesn't makca palindrome, but it 
rr.wltftd in a Hirnin gnod nip of mffpr. .Starhii^s CEO is that man, And you 
already kiiuw Ills plan: a Slarbuzz uu every curuur. 

In only a few years he's executed that plan and today you can enjoy Starbuzz 
just about anywhere. An<i of course, the big news this year is that Starbuzz 
teamed up with Head First readers to create Starbuzz's Web presence, 
which i£ jtrowinx rapidly and helping to meet the caffeine needs of a whole 
new set of customers. 


STARBUZZ COFFEE BEVERAGES 


We've got a variety of caffcinatcd beverages to choose from at Starbuzz, 
including mir Housr niend. Mocha Cj\ie Cappurrino, And a favorite of 
uur cuiituumni, Cliai Tea. 

We also offer a variety of coffee beans, vsiiolc or ground, for you to take 
home with you. Order your coffee today using our online Bean Machine, 
and take the Starbuzz Coffee experience home. 



♦ 


U1U)EK UNLLNE with the 出人、 MAC11LNK 

FA5TT 

FRESH 

TO YOUR DOOR 

Why wait? You can order all our fine coffees 
right from the Internet with our nrw, 
aulumated Beau Madilnu. How dim it wurk? 
Just dick on the Bean Machine link, enter 
your order, and behind the 9ccnc3, your 
coffee is roasted, ground (if you want), 
packaged, and shipped to your door. 



⑰ 2012 , Starbuzz Coffee 

All trademarks and registered trademarks appearing on this site are the property of their respective owners. 




Starbuzz Coffee 

if ◄ ► | +,. f^filc:///chaptcrll/starbuzz/index.html 


| QCoffee 

...providing all the caffeine 
you need to power your 
life, just drink it. 


QUALITY COFFEE, QUALITY CAFFEINE 

At Starbuzz Coffee, we arc dedicated to filling all your caffeine needs through our quality coffees and teas. Sure, we 
whiiI ymi In liiivr h grrjil mp uf mffpi? himI h grpjil mffnr rx|N*npiui* as wvll, lml wtr'nr llir (inly minpHiiy |1ihI «i4 \w\y 
monitors and optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean Machine 
online order form, and Ret that quality Starbuzz coffoo that you know will meet your caffeine standards. 

And, did we mention caffeine? We've just started funding the guys doing all the wonderful rcscardi at the Caffeine 
Buzz. If you want the latest on coffee and other caffeine products, stop by and pay them a visit. 


OURSTORY 

”A man, a plan, a coffee bean". Okay, that doesn't 


makca{>£ 
'his plan: 


palindrome, but it resulted in a damn good cup of ooffee. 


tanywr 

the big news this year is that Starbuzz teamed up with Head First readers to create Starbuzz.s Web presence, which 
is growing rapidly and helping to meet the caffeine needs of a whole new set of customers. 

STARBUZZ COFFEE BEVERAGES 

We've ftot a variety of caffcinatcd beverages to choose from at Starbuzz, including our House Blend, Mocha Cafe 
Latte, Cappuccino, and a favorite of our customers, Chai Tea. 

We also offer a variety of coffee beans, whole or ground, for you to take home with you. Order your coffee today 
using our online Bean Machim • and take the Starbuzz Coffee experience home. 


All trademarks and registered trade) 


© 

marks a 


2012 , Starbuzz Coffee ’ 

g on this site are the property of their respective owners. 


goi a pvoblcm. you vcsiz^c youv bvov/sev -to a 
v/ide position, i\)t (ooitr i\\t sidebav stav-i io ovcv-la^. 



Uh oh, we have 
another problem 

As you were test driving the 
page, you might have noticed 
a little problem. If you 
resize the browser to a wide 
position, the footer comes up 
underneath the sidebar. Why? 
Well, remember, the sidebar is 
not in the flow, so the footer 
pretty much ignores it, and 
when the content area is too 
short, the footer moves right up. 
We could use the same margin 
trick on the footer, but then the 
footer would only be under the 
content area, not the whole 
page. Geez. So, what now? 
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a margin alternative 




Wait a sec. Before you get way into 
solving that problem, I have to ask, why 
did we have to go to all this trouble of 
using a margin? Why don’t we just set 
the width of the main area? Wouldn’t 
that do the same thing? 


That sounds good...until you try it. 

The problem with setting a width on both the 
content area and the sidebar is that this doesn’t 
allow the page to expand and contract correctly 
because both have fixed widths. Check the screen- 
shots below that show how it works (or rather, 
doesn’t work). 

But this is good. You’re thinking in the right ways, 
and a little later in the chapter we’re going to come 
back to this idea when we talk about “liquid versus 
frozen” layouts. There are ways to make your idea 
work if we lock a few other things down first. 


角 O O 


SUrbuzz Coffee 




fil#1/ujrburr/ind^x.hTml 




farfeuzz 

Soffce 


.providing all the caffeine 
you need to power your 
life, just drink it. 


f{Y\d y/Kcn bvoy/sev y/rndow is made 

small, 七 lie *bwo s 七 av 七七 o ovcvlap. 

% ^ Surtouzz Cofftt 


QUALITY COFFEE, QUALITY 
CAFFEINE 


t Cuffcc* wc arc dcdtculcd tu filling all your 
cds through our quality ooffees and tca£. 
nt you to have a great cup of coffee and a 
experience as well, but wc*rc the only 


Al Storbuzz ( 
caffeine needs t 
Sure ，、 

great coffee experience as % 
company that adivf ly monitors and optimixM 
mffrinc IpvcU. So stnphy and fill your oip t or ordor 
online with uur new Bcuii Machine online urdcr form, 
and get that quality SUrbuxz ooffee that you know 
will meet your caffeine standards. 

And, did wo mention caffeine? Wc'vcjust started 
funding the guys doing all the wonderful research at 
the Caffeine Buzz. If you want the latest on coffee and 
olhor «iffi*iru* prndurtf., <ctnphy and pay them a visit. 

OURSTORY 

■A mnn, n plan, n ooftcc hran"'. 

maki? n palinilrtmu*, hut it resultixl in n clnnin good 
pof ouffw. SUrbuzi's CKO is lluit iium, and you 
ready know his plan; a Starbuzz on every corner. 


aln 


In only a few years he's executed thAt plan and today 
you can enjoy SUrbuzzjust about anywhere. And. of 
course, the bi|( news this year is that Starbuzz teamed 
up with I lend First rMidrn to crriitr Starhiiiz'.s Wrh 

prrsener, whidi growing rapidly nrul hrlping lo 
mvut thu caffemc nvedsuf a wholv nvw set of 
cuftomcrs. 

STARBUZZ COFFEE BEVERAGES 

WeVe got a variety of caffcinatcd beverages to 

iVKcn 七 he bvoy/sev is wide, 七 he 
*bwo -totally separate- 


ORDER ONLINE wilh U>c BEAN MACHLNE 
FAST 
FRESH 

TO YOUR DOOR 

Why wnit? You «m order nil our finr floffres 
right from I her Inlcmrl wilh nur nrw, 
autuniatud Bean Madiinu. How doc« il work? 
Just did(on the Dean Machine link, enter 
your order, and behind the scenes, your 
coffee is roasted, ground (if you want), 
packaged, and xhipprd lo your door. 


///clupfwl l/it»rbu72/tn 


ifarlbuzz 

...providing al 

Coffee 

you need li 

Hfel 


QUA1JTY COFFER, QUALITY 
CAFFEINE 

At Starbuzz Coffee, we are dedicated to filling al) 
your caffeine needs throu^i our qutlity coffees and 
teas. Sure, vfc want you to hive t great cup of coffee 
and • great coffee experience as well, but we're the 


and • great coffee expcncncc as well, but re the 
only company that Actively mo tutors and optimim 
caffeine levels. So stop by and fill year cup. or order 
online with our new Bean Mtchinc online order 
form, and get thAt quality Surbtuz coffee that you 
know will meet yoar ctffeine sUndArds. 


know will meet you 

or 隱職 — h •關廳雛 
tha Caffeine Duo. If you ««nxt the Utest on coffee VAST 

and otber caffcioc products, stop by and p«y them a 

visit. FRESH 

OUR STORY TO YOUR DOOR 

nail? You out ordrr all our Cine coffee% 
from thr Iiitrrnpl wilh our ww. 
automatrd Bran Marhinr. H<m dors it wori? 
Jiui click nn ihr Bran Marhinr link, rntc 
)t>ur order, and brhind I hr snrnm, your 
roffer w nM»trd. ground (If you wnnl), 
porkagrtl. am! shipped to your door. 


n.« pUn •聽 • 

make a palindrome, but it resulted in a damn bwk! 
cup of coffee. Starbuzz'* CEO is that man. and you 
already know his plan:« SUrbuzx on every comer. 


Why ， 
ri^ht f 


In only a few yean he's executed that pUn and texlay 
you c&n ei^oy Starbuaejuft about anywhere. And, of 
SUrbus 
o«*tc 、 
rowing rapidly 
ids of a wiiolc new wtof 


c, the big nc^i this year ij thAt Starbua 
teamed up with Head Writ readers to create 
St^rbuzz's Web pirsmoe, which is grev 
And helping to meet the c^feine 
customers. 


STARBUZZ COFFEE BEVERAGES 


Wc'\r got a vorirtyof CAfTcinatrd brvrragrsti 
Slarbiizz, indudin^our Hou r R' ul, N!o. }i ; 


choose fromet 

Cafr I^ttr, 
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layout and positioning 


Solving the overlap problem 


To fix our overlapping problem, we’re going to use 
another CSS property that you haven’t seen yet: the 
clear property, and here’s how it works … 

love’s y/Kd'b 30 七 y\o>w. "The 

<div> *»s sKo\rt ⑶ ou# 

从 a 七七 ^ Wtev <dw> IS tommj 
v •吵七叶 and ovcvla^'mj With 
{\\t sidcbav <dw>. 



TKis Kaffens bedause tKc sidebav Kas been fulled out tKc -flow. 
So, tKc bvoy/sev jus 七 lays out tKc main 3r\d -footev <div>s like it 
normally y/ould ； ignov'mj tKc sidebar (altiioujK vcmcmbc\r tKat >wKcn 
七 lie bvoy/sev -floy/s mime clcmchts, it >will vespedt 七 he bovdev-s o( 
*tKc sidebav dnd >wv-ap mime elemeirrts abound i*t). 



You can use the CSS clear property on an element to request that as the element is 
being flowed onto the page, no floating content is allowed on the left, right, or both 
sides of the element. Let’s give it a try … 



#footer { 

background-color : #675c47; 
color : 
text-align : 
padding : 
margin : 
font-size : 
clear : 


Now when the browser places the 
elements on the page, it looks to see if 
there is a floating element to the right 
side of the footer, and if there is, it 
moves the footer down until there is 
nothing on its right. Now ，no matter 
how wide you open the browser, the 
footer will always be below the sidebar. 


Hcv*c >ncVc 3ddnr»5 3 ^VO^CV"*bY *to 
七 -foctev* v*ulc> says 七 
no -floatmj to 灼七⑶七 is allowed OY\ 
v'ljKt o( (ooitr. 



Now 七 he -fooiev- is below 

iKc sidebav- so -that iheve ave r\o 
-floating clcrwCh*ts *to its vigli-t- 
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more about columns and floats 


Test drive 

Go ahead and add the clear property to 
your “starbuzz.css” file in the footer rule, 
and then reload “index.html”. You’ll see that 
when the screen is wide, the footer now stays 
below the sidebar. Not bad! 

Now, at this point the page is looking pretty 
good, but there are still a few improvements 
we can make. For instance, we’d like each 
column to come down to meet the footer 
so they are even — notice, as it is now, there 
is a gap either between the main content 
and the footer (if the browser window is set 
wide), or the sidebar and the footer (if the 
browser is set to a normal width). But fixing 
this isn’t that easy using float, so instead, 
we’re going to move on and look at a few 
more ways to lay out these pages using other 
CSS techniques. As you’re going to see, 
there are many ways to do things in CSS, 
and each method has its own strengths and 
weaknesses. 

What’s important to you is that you 
understand the techniques so that you can 
apply them when and where you need to. 



t^lovj our -foo-tcv pv-oblcms av-c solved- T^c 
fooier >will always be below i\\t sidebav, y\o 
maiicv- iiov/ nav-vov/ ov- y/idc iiic bv-ov/sev. 


D 


there jetre no 

)umb Qv 


Questi9ns 


Can I float to the center? 


No, CSS only allows you to float an 
element to the left or right. But if you think 
about it, if you were to float to the center, 
then the inline content under the floated 
element would have to be flowed around both 
sides of your element, which would be quite 
tricky to get to work in a browser. But one of 
the new layout solutions that will be coming 
in future versions of CSS may provide a way 
to do it—we’ll have to wait and see. 


Do margins collapse on floated 
elements? 

No, they don’t, and it’s pretty easy 
to see why. Unlike block elements that 
are flowed on the page, floated elements 
are just, well, floating. In other words, the 
margins of floated elements aren’t actually 
touching the margins of the elements in the 
normal flow, so they can’t be collapsed. 


But this raises a good point, and identifies a 
common error in layouts. If you have a main 
content area and a sidebar, it is common to 
set a top margin on each. Then, if you float 
the sidebar, it still has a margin, and that 
margin won’t be collapsed with whatever is 
above it anymore. So you can easily end up 
having different margins on the sidebar and 
on the main content if you don’t remember 
that floated elements don’t collapse margins. 
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layout and positioning 


Can I float an inline element? 


Yes, you sure can. The best example and a common 
one — is to float images. Give it a try — float an image left or right in a 
paragraph and you’ll see your text flow around it. Don’t forget to add 
padding to give the image a little room, and possibly a border. You 
can also float any other inline element you like, but it’s not commonly 
done. 


Is it correct to think about floated elements as elements 
that are ignored by block elements, while inline elements know 
they are there? 

Yes, that’s a good way of thinking about it. Inline content 
nested inside a block element always flows around a floated element, 
observing the boundaries of the floated element, while block elements 
are flowed onto the page as normal. The exception is when you set 
the clear property on a block element, which causes a block element 
to move down until there are no floating elements next to it on the 
right, left, or both sides, depending on the value of clear. 



The only thing I 
don’t like about this design is 
that when I view the web page on 
my smartphone, it puts the sidebar 
content above the main content, so I 
have to scroll through it. 


Right. That happens because of the 
way we ordered the <div>s. 

This is one of the disadvantages of the way we’ve 
designed this page — because we need the sidebar to 
be located just under the header and before the main 
content, anyone using a browser with limited capabilities 
(PDAs, small mobile devices, screen readers, and so 
on) will see the page in the order it is written, with the 
sidebar first. However, most people would rather see your 
main content before any kind of sidebar or navigation. 

So, let’s look at another way of doing this, which goes 
back to your idea of using float “left” on the main 
content. 
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the no css test 


Look Ma, No CSS! 

Want to know how your pages are going to look to your users under 
bad conditions (like on a browser that doesn’t support CSS)? Then 
open your "index.html" file and remove the <link> from the <head>, 
save, and reload the page in your browser. Now you can see the 
real order things will be seen in (or heard from a screen reader). Go 
ahead and give it a try. Just make sure you put it back when you’re 
done (after all, this is a chapter on CSS). 


七 he S-tav-buzz. pay y/i*tliou-t 
CSS. Fov- -the most pavt, y/cVc \ y \ 
good shape. It is still vcv-y veadabl^ 
although Bedh Aladlimc does 
dome bc-fovc ilic ma'rn dorrtent, — 


y/hidli fvobably is / 七 y/Ka*t wc want. 


^ O SUrburr CoWet 


4 1 I c } I ♦ 11 》 filt:///ctiapi(rl2/tt>rbia22/i(idi0LlMI 



OKDLK ONLLVt with the PLAN MACHLN1: 

FAST 

FRESH 

TO YOUR KXX^R 

Why wait? You oui order all our fine coffees right from (be Internet with our new, automated Dean Machine. How docs h 
wcmI? Just dick on the Bean Machine link, enter your otdet, and behind (he scents, your coffee u masted, gmund (if you 
want), packaged, and shipped lo your door. 

QUALITY COFFEE, QUALITY CAFFEINE 

At SurtMii 2 Coffee, wc arc dcdkaicdio filling ill your cifTcinc needs through our quality coflecs and teas. Sure, wc warn 
you in have a great cup of enffee and a gitat coffee experience well, but we're the only company chat actively monitor and 
optimizes caffeine levels. So Mop by and fill your cup, or ontcr online wuh our new Bean Machine online onjcr form, und get 
ihai quality ScutHUJ. coffee (hai you know will meet your caffeine candanh. 

And, did wc memion caffthwl We've Juu turned finding the guy« doing all the wondo^jl research at the raffetng Bum - If 
you want (he Utestoo coffee and (Xber caffeine products, slop by and pay them a visit. 

OURSTORY 

•A man.tt plan, a coffee bean". Okay, (hat domi*( make a palindrome, but it mulled m ■ djunn good cup of oofTcc. 

Suxbuyj.'ft CEO U Khu man, ind you already know hit plin: i Starixixj on every comer. 


Righty tighty, lefty looscy 

Let’s get the Starbuzz page switched over so that the main content is floating left. 
You’re going to see that the mnemonic righty tighty, lefty loosey holds true in the 
CSS world too.. .well, for our sidebar, anyway. Here’s how we convert the page 
over.. .just a few simple steps. 
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Step owe: Start with the sidebar 

We’re basically swapping the roles of the sidebar and the main content area. The 
content area is going to have a fixed width and float, while the sidebar is going to wrap 
around the content. We’re also going to use the same margin technique to keep the two 
visually separate. But before we start changing CSS, go to your “index.html” file and 
move the “sidebar” <div> down below the “main” <div>. After you’ve done that, here 
are the changes you need to make to the sidebar CSS rule: 


#sidebar { 

background : 
font-size: 
padding : 
margin : 
w idth :- 


#efe5d0 url(images/background.gif) bottom right; 


105%; 

15px; 

Opx lOpx lOpx 470px; 
2Q0px; 



flo&t: 


ri g ht 



iVe’ve sc-ttmg a width oh ma'm 

dohicni <div >； so delete ilic sidebar 
fv-ofc\rty alor\g y/itli 七 he -float. 

Step two: Take care of the main content 

Now we need to float the main <div>. Here’s how to do it: 


Bcdausc tKc sidebav is r\o>w go'mj bo -floy/ 
undev tKc main dontent wc need h> move tKc 
lav^e mav-j'm -to 七 he sidebav. TKc -total y/idtK 
of tKc main donicht avea is \10 pixels. (6\o 
aKead and domputc tKat youvsd-f m all 七 ha 七 
-fvee time you Kavc. Compute it in 七 lie same 
>way as you did -fov 七 lie sidebav. You should 
knov/ 七 ha 七 weVe go'mg bo sc 七 tKc y/idtK o-f 
七 lie main avea "to 午 ZO pixels.) 


#main { 


background : #efe5d0 url(images/background.gif) top left; 


font-size 
padding : 
margin : 
width : 
float: 


l/V(C’ve dhang'mg *tlic \rigli 七 mavgrn -fv-om 
努 O 户 % els badk -to 10 户乂 els. 


105%; 

15px; 

Opx lOpx lOpx lOpx; 

42Opx; < —-—後 need *to sc*t expli 匕 i 七 W\d{\\ be 匕 duse wcVc jomj h> 

left; \ -float this clcmch-t. Lets use 午 ZO pixels. 

V l/Vc’ve go'mg -to -float tKc mam <div> -to 七 lie Ic-Pi. 


Step three: Take care of the footer 

Now we just need to adjust the footer to clear everything to the left, rather than the right. 


#footer { 

background-color : #675c47; 
color : #efe5d0; 


text-align 
padding : 
margin : 
font-size : 
clear : 


center , Clia^jc *tiic ^lca\r pvopev-ty h> Kavc 

15px' a value o-f Ic-f^ \ra-tlicv ttah vig^t. 

lOfx, TKat way, the -foo-tev will stay ^Icav- 

90 名， ma'm doirtch 七 aved- 

left; 
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contemplating a better solution 


A quick test drive 


We’ve already said there might be a few 
problems with this method of floating 
the content to the left. Do a quick test 
drive before you move on just to see how 
this is all working. Go ahead and make 
the changes to your “starbuzz.css” file 
and then reload “index.html” in your 
browser. Get a good feel for how the page 
performs when it is resized to narrow ， 
normal, and wide. 



A^iually, iKis looks jood, >wc 

Vtdve <div>s m -tliC vijKt order no>w. Bui 
\i l s r\oi gv-cai iKat sidebav 叫 ads; 
ii looks a loi bciicv £idcbav-s av-c 

o*f 七⑶ used -fov a^d iiicy do” 七 

look vevy good expanded • 


只 1 


孓 l.irbu// Cofft^r 


+ ) M Mt; // /chapter 1 1/ttart>u 22 / md<x. html 


C«ooglc 


StaHbuzz 
7 Coffee 


.providing all the caffeine 
you need to power your 
life, juitt drink it. 


QUALITY COFFEE, QUALITY CAFFEINE 

At Stariium CofTnt*, wr are drclimlrai lei filling nil ynur nifrrinr 
nreni% thniuf^i our qunlily ni(Ti!H*9i nncl frits. Sun% wr wnnl you to 
haw n Krrat cup of cnfTrc nnd n f ； n*al cnfTrc cx|M*rirnnr as wrll, hut 
wr'rr I hr only company Ihnl aclivrly mnnitors and nptimi/r.s 
enffrinr IpviUs. 55o tfnphy and fill your cup, or ordrr online with our 
nrw R«in Marhiiu* online ordrr form, And Rrt that qiuility Starhuz?. 
coffee* that you know will mw*t your cnffi*inc • 切 andArcU. 


And. did wc mention caffeine? WcVc just started funding the guys 
doing all the wonderful research at the Caffeine Bu.. . If you want 
the latest on coffee and other caffeine products, stop by and pay 


them a visit 
OURSTORY 


"A man. a plan, a coffee bean". Okay, that doesn't make a 
palindrome, but it resulted in a damn good cup of coffc«. SUrbuzr's 
CEO is that man. and you already know his plan: a Starbuzz on every 


In only a fow years he's executed that plan and today > 
' • • ' _ c. the big 


you can enjoy 
news this year 


SUrbuzz just about Anywhere. And, of course 
is tlial SlarbiLu tuaiiicd up with Head Fir»t reader)* tu cruatv 
SUrbiuoc'ii W«b prvsviicc, \%iuchui growing rapidly and helping lo 


meet the caffviiiv accds of a whoUr new iwtof cuiitomcni. 



OKDKK ONIJNKmth the KF.\N MACH：N K 
FAST 
FRESH 

TO YOUR DOOR 


Why wiit? You am order all our fine coffees right from the 
automated Bean Machine. How docs it work? Just dkkon t 
your order, and behind the scenes, vour coffee is roasted, e 


Internet with our new, 
(onth« Bean Machine link, enter 

your order, and behind the scenes, your coffee is roasted, ground (if you wan!), 
packaged, and shipped to your door. 



iVKcn y/c -float 七 he sidebav <div> vijK-t, 

七 lien 七 lie design stays hide ay\d 
allowing 七 lie *to expand，but i-f we 

-float tKc main dontcht b> tKc Ic-f-t, 七 lie 
design -feels -boo loose, allowing 七 lie sidebav 






Design-wise, the first design worked better, while information-wise, the 
second works better (because of the placement of the <div>s). Is there 
a way we can have the best of both worlds: have the sidebar at a fixed 
width, but the main <div> still first in the HTML? What design tradeoffs 
could we make to get there? 
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layout and positioning 


Liquid and frozen designs 

All the designs we’ve been playing with so far are called liquid layouts 
because they expand to fill whatever width we resize the browser to. 
These layouts are useful because, by expanding, they fill the space 
available and allow users to make good use of their screen space. 
Sometimes, however, it is more important to have your layout locked 
down so that when a user resizes the screen, your design still looks as it 
should. These are called frozen layouts. Frozen layouts lock the elements 
down, frozen to the page, so they can’t move at all, and so we avoid a lot 
of issues that are caused by the window expanding. Let’s give a frozen 
layout a try. 



Going from your current page to a frozen page only requires one addition to 
your HTML, and one new rule in your CSS. 

HTML changes 

In your HTML you’re going to add a new <div> element with the id 
“allcontent”. Like its name suggests, this <div> is going to go around all the 
content in your page. So place the opening <div> tag before the header 
<div> and the closing tag below the footer <div>. 

<body> ^ Md a now <div> *tKc id o( 

<div id= n allcontent"> avound all the in -tiic <body>. 

<div id="header"> 

••.rest of the HTML goes here... 

</div> 

</div> 

</body> 



CSS changes 


Now we’re going to use this <div> to constrain the size of all the elements 
and content in the “allcontent” <div> to a fixed width of 800 pixels. 


Here’s the CSS rule to do that: 


#allcontent { 

width : 800px; 

padding-top : 5px; 

padding-bottom : 5px; 

background-color : #675c47 


iVhilc wcVc a*t i*t> s'mdc 七 his is 七 lie *fi\rs 七七 ‘C 
wcVc s-tyl'mj 七 his let’s add some paddmg 

airvd jive i*t rts ovm badkyound dolov. You’ll see 
tKis helps *to tic tKc wKolc 


TKc outev w alldontcnt w <div> is always 900 pixels, cv/Ch y/Kcn tKc bv-ov/sev is vcsi^c 山 so y/c ； vc 
c-f-fcdtivcly -fvoz^n tKc <div> b> tKc pay, along y/i-tii cvcvy-tK'mj inside it 


you are here ► 
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frozen layouts 


A frozcw test drive 


Go ahead and add this rule to the bottom of 
“starbuzz.css”，and then reload “index.html”. Now 
you can see why we call it a frozen layout. It doesn’t 
move when the browser is resized. 广 一 '^> 

Now tKc w alldor\*tcn*t W <div> is 900 pixels in y/id 七卜 no ma 七七 cv 
Kow you vcsiz-c tKc bvoy/sev. because all tKc otKcv <div>s 
avc inside w alldor\-tch-t w > tKcy y/ill -fit m-to tKc 
spade as well. So, 七 he page is basidally -fvoz-cn *to 900 pixels. 

TWis tcv-tamly solves 七 k problem o*f tte s«dcbay 
a^d \i looks ^ \i is a little 

sbra^t ^ ttc Wowser is vc^y Wide, 

because all ttc ⑽ ? 切邛 ate ⑽如邱七 s,de. 

But v/cVc not dioirve yet ^ vc 5°"t a 
li 七七 le voom -fov im^VOVCrwCnt- 


A 八 


SurlMXZ CoUtt 


1 ^ r r j l 






Hbwzz 

ffee 


QUAIJTV COFFF.E, QUAIJTY CAFFEINK 

A! StArb«B Coffee, wc arc dcdkalcd to fiOinc all your oaffetnc 
nc«d« through our quality «offc«s umI tea*. Sure, %«« mum you to 
have a urcct cup of oofTvc And a treat coffee csipcrinioc •» wdl, but 
re the only mraftany tlu< Mtiwly moniton and optiimxe* 
r cinc levels. So clop by uk! fill ”>ur cup, or order online with our 
ru Madiint online order fonn. and set that qiudity SUrbuzz 
(kal you know will mrc< your caffeine Rtandarda. 

And. diduv mrntion Wc\« just tUrted funding the jniyv 

doinf all ike wonderful mesrdi «l the ( >! ：!> ：-•-•. lfyou w«nl 

the latr«t on ooffrr and other caffcinr products, slop by and pay 


...providing all the caffeine 
you need to power your 
life, just drink it. 


"A imn, a pUn, a coffee bean". Olay, that doc«n、make • 
pdiadrMiie, but it resulted in a d*ma t/x>d <upof coffe«. SurtMU^i 
CEO ia tluit snan. sad yov alrc«4y haem hia pUa;a Slarbvjsoa evsiy 
comer. 

n only • few yxtn he's executed that pUn aad today >vu out tn)oy 
itarbuzxjutt «bo«t uyMtterv. And. of eourn. Ibr big newt thu yrtr 
t th«t Starbau tcAincd up with llc*d Pint rcMlento ctmIc 
I tarbazz't Web presence, wiiidi is Krowinc rapidly and bdpinftto 
nrct (he caffrinr nrcd«of a iwltolr tMrw art of maiomcr*. 

1 ： RAGES 

borr«*ti t( 

-n‘i* Moc-Ha Cmfr l^iMr, 

rustonvrs, (!h*i Tr*. 

Wr alao offers variety of coffee beaaa, wtioleor ground, for yoviti 
tjloc home Milhjrou. Order yo«r coffee today uttfift our online i 1 - < 
MMiiine. and taike tbe SUrbuzz Co(f«« experience hotne. 


meet the 

STARBUZZ COFFEE BEVE! 


We*vc jgot • variety of caffcinatcd borrata to choose from at 
Starbuza, iadmlin^ o«r Hou«- M 

( Vapputxmo, and a fivorilc of our nutonvr：!, 



ORDER ONIJNE with the -AN MAT li：SK 
FAST 
FRESH 

TO YOUR DOOR 

Why w»it? You etn order all our fme <offee« 
right from the tnicrnct with our ocw, 
■uloriuted Beui Madiior. flow does it work? 
Just dldc on the Bean Machine link, enter jrovr 
ortkr, and behind tbe Mean, yo«r coffee b 
roasted, i^mnd (if you %««ntX p«cia|te<i And 
■hipped to your door. 





Whaf s the state between liquid 
and frozen? Jello, of course! 



The frozen layout has some benefits, but it also just plain 
looks bad when you widen the browser. But we’ve got a fix, 
and it’s a common design you’ll see on the Web. This design is 
between frozen and liquid, and it has a name to match: Jello. 
Jello layouts lock down the width of the content area in 
the page, but center it in the browser. It’s actually easier to 
change the layout to a jello layout and let you play with it 
than to explain how it behaves, so let’s just do it: 


#allcontent { 

width : 800px; 
padding-top : 



RatKev- 从扣 Kav'mg -fi^cd Ic-ft a^d v-ijKt 
mavgms on tKc “alldoirrtcirvt" <dw>，V/eVe 
settmj 七 he *to w du*to”. 


padding-bottom : 5px; 
background-color: #675c47; 


margin-left: auto; 
margin-right : auto; 

l-f you wlicv\ we talked about givmj a av-ea a widtK o-f w au*to w ； 七 he 

b\rowsc\r ocpa^dcd tKc dowtervt a\rca as mudh as i-t needed b>. I/Vi 七 h w auV mav-jrns, 

七 he b\rowsc\r -fijuircs out what 七 he do\r\rcd*t mav-j'ms a\rc, but also makes suv-c 七 he Ic-ft 
av\d rwa\rg'ms a\rc 七 he same, so 七 ha 七七 he don 七⑶七 is dewiev-edi. 
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W\dt 




So if we want our content in the 
correct order, we either have to live 
with an expanding sidebar or we have 
to use a jello layout? Is there any 
other way to do this? 


With CSS, there are typically lots of ways to approach a layout, each with its 
own strengths and weaknesses. Actually, we’re just about to look at another 
common technique for creating a two-column layout that keeps the content in 
the correct order, and avoids some of the problems of the liquid layouts. But as 
you’ll see, there are some tradeoffs. 

With this new technique, we’re not going to float elements at all. Instead, we’re 
going to use a feature of CSS that allows you to precisely position elements on 
the page. It’s called absolute positioning. You can also use absolute positioning 
for some nice effects beyond just multicolumn layouts, and we’ll look at an 
example of that, too. 

To do all this, we’re going to step back to the original HTML and CSS we 
started with in the beginning of this chapter. You can find a fresh copy of these 
files in the “chapter 11/absolute” folder. Be sure and take another look at these 
files so you remember what they originally looked like. Recall that we’ve got 
a bunch of <div>s: one for the header, one for main, one for the footer, and 
also a sidebar. Also remember that in the original HTML, the sidebar <div> is 
below the main content area, where we’d optimally like to have it. 


Test driving with a tawk of jello 


Add the two margin properties to your “starbuzz.css” file, and then reload 
the page. Now play with the size of the browser. Pretty nice, huh? 


Kavvoy/ 





QUALITY COFFEE. QUALITY CAF» E1N£ 

At Surbua Coffd are to (QLag il your caffoae 

atcdallarcu^o« 7 qwlil)rco<fe*«aad!c«» Sure, wr «nnt you l» 
keve e«p coffee end • esffcc c^erkan _ wvIL but 

> the mK oompuiy that tetntfy mo now ind optmiaes 
iwlrvtm So Mop by and f3 jour cup. or onSrr odinr wilk our 
koan Mmikimt onlaK «rdcr fom. usd pet that qualty StarWw 
willnectjiouradfdBr 


mew M*asaac oniif < 
oofft* tlktl yo« law«* will b 

«kincalltW««iiderfdre«Mnhal(hc > . . If >o« **wl 

Ihr ktlMI on connaadotbcrodTaar 7 ro 6 KU.i(opb 7 Mdp«]r 

CHJK&riURY 

•A nun,a coffr* bets'Olay. IkM 4am、aukr • 

fBodfpofaiht.^irtnWt 
CSOfalhal nun. ami you Ierom hi« pUs ： • StarWaMvwry 

oamrt. 

lnnnlj • tK«t plan mm! wwljy you cam #«jny 

StarbcsijMl abovl «ayt»rf. Aaiof eourw, kifnnmlaiyw 
»thM SUrtws tMaoc4up Head IM r«a4erato crcMt 

fiurhaov*c W〆 、 yw* 替 iw. «4tUfti U r«piMy 

■M«t the affr.nc xcA of 癱 Mieb nr« act of automm. 


WtV«po4avi 

SUrlmn.wV 


TJ2. COFFKK RKVKRAGKii 
a vanrtjr of caffctnaMd kmragn u 


% 


OKOElOMIXEwitkithe I r.VVMW I IN! 

PAST 

F1U3H 

TO YOUR DOOR 

VVh) waJi^YoueHi<«dtrdio«rflncooAm 
from tl» IrtmH mill Mr w«r 
MKmtrdBeanMAckMBe. Itowdoccit work? 
AM dki oa ihr Braa c«c? 

arilrr, a ad tvhinl llv ynmr » 

roMtcd lEro>ind Mnll pcdtairdL and 

•hipped to your door. 


lochoMtiroaiai 




».•, frtt-mrotf our customm, <3bai Tca. 

Wc alio offrra variety o€ aoffee baM. wImIcct crounl fer ， 
t^se bamr yoa. Ordct >olt eotttt lodiy uaaftour online 
MKiikar, *adui*lhcSUab<M(Conc<>«a|Mrirac* boav- 



Su/ba/x Colt” 





嚆 on Aii dte m« tW property their retfecrivt 


Starfeuzz 

/Coffee 




..providing all the caffeine 
yoa need to power your 



you are here ► 
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using absolute positioning 


How absolute positionmg works 


Let’s start by getting an idea of what absolute 
positioning does, and how it works. Here’s a little 
CSS to position the sidebar <div> with absolute 
positioning. Don’t type this in just yet; right now we 
just want you to get a feel for how this works: 


What the CSS does 



Now let’s look at what this CSS does. When an 
element is absolutely positioned, the first thing the 
browser does is remove it completely from the flow. 
The browser then places the element in the position 
indicated by the top and right properties (you can 
use bottom and left as well). In this case, the sidebar 
is going to be 100 pixels from the top of the page, and 
200 pixels from the right side of the page. We’re also 
setting a width on the <div>, just like we did when it 
was floated. 


TKc 七 tiimg wc do is use 七 he 
position pv-opc\rty to spcdi-fy that 七 he 
clcrwcht will be posi-tiohcdi absolutely- 


#sidebar { 

position : absolute; 

top: lOOpx; ^wc sci -top a^d 

right : 20Opx; ^ - 〆 hgh 七 fv-ofcv-tics. 

width : 280px; 





wc also jive 
iKc <div> a width. 


TKc sidebav is 
positioned 2-00 


^i^cls -fvom 
vigKt o( 


Because sidebav is ⑽如 
absolutely ^os'itioirvcd, \i 
is vemoved -fv-om -flov/ 
and ^os'»*t»oir\cdi ac-tovdi^^ 
-to 吵七， 

ov- bottom 

i\\ai avc 


<r 


id=“header 





div id=“sidebar 


Bcdausc {ht sidebav- is oui o( 
do〆 七 cvcy\ k 灼 o>w i 七 is 七 

ay\d iiicy ij^ov-c i*t -bo-kally- 



div id=“footer”^^^* 

T_ 

- ) 

1 



A 




£lcnr»ch*ts 七 ha 七 av-c \y\ 七 lie -flow dor / 七 cve^ w\rap 七 lieiv 
•mime dorvtcrvi a\rouv\di arv absolutely fositiov\cdi element. 
They *to*tally oblivious *to it bein^ oy\ *thc page. 


f{v\d the sidebar 
is ^ositiohcdi lOO 
pixels -fv-om 七 lie 
°*f 仏 e page. 
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Another example of absolute positioning 

Let’s look at another example. Say we have another <div> 
with the id “annoyingad”. We could position it like this: 


Wow we ^avc a sc^ohd <div>, positioned 
absolutely ； lOO pixels -fvom -tKc \t(i 


#annoyingad { 

position : absolute; 
top : 150px; 

left: lOOpx; 

width : 40 Opx; 




The dd is beirv^ ^ositiowcdi 100 

fi^cls -f\rom ihc l^O —els 

-fv-orw 七 he -tof. Its also a bit y/idcir 七 
七 he sideba\r, a 七午 00 pi 乂 els. 

Just like with the sidebar, we’ve placed the “annoying 
ad’’ <div> at a precise position on the page. Any 
elements underneath that are in the normal flow 
of the page don’t have a clue about the absolutely 
positioned elements layered overhead. This is a little 
different from floating an element, because elements 
that were in the flow adjusted their inline content 
to respect the boundaries of the floated element. 

But absolutely positioned elements have no effect 
whatsoever on the other elements. 


Who's ow top? 


Another interesting thing about absolutely 
positioned elements is that you can layer them 
on top of each other. But if you’ve got a few 
absolutely positioned elements at the same 
position in a page, how do you know the 
layering? In other words, who’s on top? 

Each positioned element has a property called 
a z-index that specifies its placement on an 
imaginary z-axis (items on top are “closer” to 
you, and have a bigger z-index). 

丁 he V^cadcv, wam, 
Wcv <dw>s avc all 

m ttc -flat 

OY\ "tV^C V a 5 C ' 



OY\ -top o-f tKc sidebav <div>. 


The sidicbair and awrvoy'mjadi <div>s 
av-c laycv-cd oy\ -the page ； y/i-tli -tiic 
arvnoy'mjadi Kav'mg a gv-catcv- z.-mdic/- 
七 ha" 七 he sidebav -； so i 七 ’s ow -top. 



you are here ► 
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more about the position property 


What is the position property 
set to by default? 

The default value for positioning 
is “static”. With static positioning, 
the element is placed in the normal 
document flow and isn’t positioned by 
you the browser decides where it 
goes. You can use the float property to 
take an element out of the flow, and you 
can say it should float left or right, but 
the browser is still ultimately deciding 
where it goes. Compare this to the 
“absolute” value for the position property. 
With absolute positioning, you’re telling 
the browser exactly where to position 
elements. 

Can I only position <div>s? 

You can absolutely position any 
element, block or inline. Just remember 
that when an element is absolutely 
positioned, it is removed from the normal 
flow of the page. 

So, I can position an inline 
element? 

Yes, you sure can. For instance, 
it’s common to position the <img> 
element. You cam position <em>s, 
<span>s, and so on as well, but it isn’t 
common to do so. 


tJiereiare no ^ 

Dumb Questi9ns 

Are there position property 
values other than static and 
absolute? 

There are actually four: static, 
absolute, fixed, and relative. You’ve 
already heard about static and absolute. 
Fixed positioning places an element in 
a location that is relative to the browser 
window (rather than the page), so fixed 
elements never move. You’ll see an 
example of fixed positioning in a few 
pages. Relative positioning takes an 
element and flows it on the page just 
like normal, but then offsets it before 
displaying it on the page. Relative 
positioning is commonly used for more 
advanced positioning and special 
effects. 

Do I have to specify a width for 
an absolutely positioned element just 
like the floated elements? 

No, you don’t have to specify a 
width for absolutely positioned elements. 
But if you don’t, by default, the block 
element will take up the entire width 
of the browser, minus any offset you 
specify from the left or right. This might 
be exactly what you want, or it might not. 
So set the value of the width property if 
you want to change this default behavior. 


Do I have to use pixels for 
positioning? 

No another common way to 
position elements is using percentages. 

If you use percentages, the positions of 
your elements may appear to change as 
you change the width of your browser. 
So, for example, if your browser is 800 
pixels wide, and your element's left 
position is set to 10%, then your element 
will be 80 pixels from the left of the 
browser window. But if your browser 
is resized to 400 pixels wide, then the 
width will be reduced to 10% of 400 
pixels, or 40 pixels from the left of the 
browser window. 

Another common use for percentages 
is in specifying widths. If you don’t need 
specific widths for your elements or 
margins, then you can use percentages 
to make both your main content area 
and your sidebars flexible in size. You'll 
see this done a lot in two- and three- 
column layouts. 

Do I have to know how to 
use z-indexes to use absolute 
positioning? 

No, z-indexes tend to be used 
most often for various advanced uses 
of CSS, especially when web page 
scripting is involved, so they’re a little 
beyond the scope of this book. But they 
are a part of how absolute positioning 
works, so it’s good to know about 
z-index (we’ll come back to touch on 
z-index again in just a bit). 
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Using absolute positioning 

We’re now going to create a two-column Starbuzz page using techniques similar to 
those we used with the float version of the page; however, this time we’ll use absolute 
positioning. Here’s what we’re going to do: 



First we’re going to make the sidebar <div> absolutely positioned. 
In fact, we’re going to position it in exactly the same place that we 
floated it to before. 


❺ 


Next, we’re going to give the main content another big margin so 
that the sidebar can sit on top of the margin space. 



Finally, we’re going to give this a good testing and see how it 
compares to the float version. 


Changing the Starbuzz CSS 


Our HTML is all ready to go, and the sidebar <div> is right 
where we want it (below the important main content). All we need 
to do is make a few CSS changes and we’ll have a sidebar that is 
absolutely positioned. Open your “starbuzz.css” file and let’s make 
a few changes to the sidebar: 



totv.c o^mal vcrs '7 S f 

"/ abso 以 c “ 如 . 

u ddn y/ovk out 七 he “absolute” 

•foldcv, o\r dopy 七 he -files w mdd 七 
dnd w s*tavbuz2-dss w m*to 七 lie w s*tavbuz2. w 
-foldicv- dnd wovk -fvom 七 hevc, like y/c did- 


#sidebar { 

background : #efe5d0 url(images/background.gif) bottom right; 


font-size : 

105%; 

padding : 

15px; 

margin : 

Opx lOpx ] 

position : 

absolute; 

top : 

128px; 

right : 

Opx; 

width : 

280px; 


Okay, ^ov/ v/cVc jomj -to 払 a 七佚 c sidebar is absolu-tcly 

—^ ? os ， t.o^ca l 2 -« pixels i\yt ^ and 0 pixels i\yt 叫 f 

Jj i\y t We also sidebar -to V^avc a so lei's 

^ K -float VCV-sioy \： 2-^0 Pi> 


make i*t same as {}\t -float version ： 2-^0 p%els. 

个 

T^ro ^v-om tV>C 

Will r^akc suve 七^七 
sidcbav sticks -to tV^c 

side of 一狀 . 


You’ll see v/licv-c *tKc IZG 
t^n\t -fvom ih 3 scd... 


you are here ► 
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Now we just need to rework the mam <div> 


Actually, there’s not much reworking to be done. We’re just adding a 
margin like we did with the float version. So, change the right margin 
of the main <div> to be 330 pixels, like you did last time. 

#main { 

background : #efe5d0 url(images/background.gif) top left; 
font-size : 105%; 


padding : 
margin : 


15px; 

Opx 330px lOpx lOpx; 



1 /VcVc 50 'mj -to jive 七 he sidebav- some spade *to loe posi 七 ionedl ovcv- by 七 he ma'rn <div> a 
big mav-jin. This is vcally 七 he same wc used wi*tK -float- The only di-f-fev-ende is 

七 lie >way the sidebav- <div> is bemg fladed ovcv- iKc ma^'rn- 


All you need to do is make that change to your margin, and then save. 

But before we take this for a test drive, let’s think about how this is going 
to work with the absolutely positioned sidebar. 

WicVc ^osiiion'mg iKc sidebav *to be \W pixels -fvom 
七 lie -top, and up aga'msi 七 he vijKt side o( tKc pay. 
Keep in mmd, tKc sidebav has 10 ^i^cls mavg'm 
oy\ tKc so tKc badk^rouhd dolov >will sKoy/ 

tKvougK 七 ha 七 like bc-fovc. 


TKc main <div> is -flowed 
just bclo>w tKc Kcadcv-, 
so it will align Vrtii 七 lie 
boy o-f 七 he sidebav. Also, 
i 七 lids 3 vigil 七 mavj'm 
tKat is tKc same siz^ 
as 七 lie sidebar, so all 
i*ts mime doh*tcn*t >will 
be *to 七 he Ic-ft 七 lie 

sideba\r. Remembev tKat 
tKc -flowed elerwCh-U 
don’ 七 kr\o>w about 七 he 
absolutely positioned 
elemerrts a 七 all, so 
tKc mime Cor\icr\i，in 

七 he -flowed elements 
dioesn t >wvap abound tKc 
absolutely positioned 
elements. 


div 


id=“header” 


V 





div id=“main ， 


div id=“sidebar 



div id=“footer ， 


pixel *tof mav-g'm 

09 pixels -fov Keadiev-. You dan 
see 七 Wis Kei# 七 sc 七 in 七 lie CS£- 

IO-pi%cl bottom mav-g'm 

TKc sidebav needs {o be 
IZ® pixels -fvom 七 lie boy 
bedause 七 hat’s c^adtly 
Koy/ voom 七 lie 

Keadev "takes up, mdudmg 
mav^ins. 




You mijKt v /扣七 io 七 IVmk about >/Ka*t Kafpcir»s -to 七 lie 
-foo-tev. Bedause -flowed elements dor /七 kr\o>w about 
absolute elements, we use w dlcav- w anymove. 
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Time for the absolute test drive 


Make sure you’ve saved the new CSS and then reload 
: index.html” in your browser. Let’s check out the results: 


A 


Wo>w ； 七 liis looks 3 州 32> 叫 1 丫 
like tKc -float vevsion ； 
Koy/cvcv, you kr\o>w 七 ha 七 
tKc sidebav is being 
positioned absolutely. 


Tiic vndm toyvtevrt 3v*c3 
has a V*i 分七 mavjm 七 lid 七 is 

:% attly tKc v/idt^ o-f {\\t 
sidebav, a^d t^c sidebav 

srts OY\ {py of tKat spate. 


t 




SUrbuzz CoffM 




SfaHbwzz 

/Coffee 


QUALITY COFFEE, QUALITY CAFFEINE 

At Slarbuxx Coffee, we Arc dedicated to fining «Q your caffeine Deeds 
throufh our quality ooffc«« tnd tea*. Sore, vw want you to have a great cup 
of coffee and « ^rc«l coffee experience as well, but we're the only comp&ny 
that actively monitors and optimbrs aiffrinr lrvrk. So stop by «nd HD >x>ur 
(up, or ord»r onliiM %»nlh our ntw Bean MAchin« onlin* onirr form, and giM 
that quality St&rbua coffee that you know will meet your caffeine 


v\nd. dkl we mention cofftmtf We've just started funding ibe guyv doing all 
the Monderfu] ro^^rch at the r.iffrir n j. .. If you want the bt^st on coffee 
And other CAffcinc products* stop by And pay tluema viciL 

OURSTORY 


"A tnarua plan.« coffee bean". Olay, that doesn't makes p«lindrome. but it 
resulted in a damn good cup of coffee. Slarburz's CCO» thal man. aod you 
alrciidy know hU pl&n: a Starbuzzon every comer. 



Iq only 纛 few years he's executed \ha\ pUn and todiy you c^n ciuoy Surbus 
just about ai^vhere. And, of course, the bis this ye^ris that Starbuzz 
teamed up with Head First readers to create Starbuxz's Web procnoc, 
which is ^rawing rapidly and hrlping to mrct the aiffrinr needs of a whole 
new set of customers. 


STARBUZZ COFFEE BEVERAGES 


choose from at Surbazi 
C*ppoccui»j. and • fsvoritc 


Wc'vr got • variety of caffciiutcd beverages to 
indwlui^our :: ->um ： Blc ： i<J. N!ocha CVtlc 

of our customrn, Chai Tea. 

W« aIco offer a variety of coffcti beanc, whoUt or uround, for you to t 
ic with you. Order your coffee today uiinf our online 【ksaa Machine, 
take the SUrbuzz Coffee experience borne. 


home 

and 




...providing all the caffeine 
you need to power your 
life, just drink it. 



Starfoua Coffee 

on this site ire the property of their respective c 


you vcs'izjc *tKc 
bvov/sev", *tKc sidiebsv 
alv/ays si-ts 12.9 pixels 
-fv-om di^d sticks 

{p iKe vijK-t o-f iKe page- 


iKe sidebav- Kas a 
10 — pixel viglvt mav-jrn, so 
ii Kds bctv/ccn ii 

and tKc edge o-f *tKc paj 


c- 


A^d wc^c still got a 
hide gutiev- between 
*bwo dolurmns. 


But we are now back to having a problem with the 
footer. When the browser gets wide enough, the 
absolutely positioned sidebar comes down over the top 
of the footer. Unfortunately, we can’t fall back on the 
clear property this time, because flowed elements 
ignore the presence of absolutely positioned elements. 


角 A o 

Surbuzz Coffee 

[◄ | ^i{ -fj 0 fil«; // /cruptcrl 1 /surt>uz 2 /indtx.html 

____ C i/Q" Looflle 】 

Sfarfeuzz 

...providing all the caffeine 

i r _7 Coffee 

you need to power your 
life, just drink it. 


QUALITY COFFEE, QUAMTV CAFFEINE 

At SUrbuzz Coffee, we arc dedicated to fUliogall your caffeine needs through our qiuiity coffees and teas. Sure, 
we want you to have a great cup of coffee and • great coffee experience as well, but we're the only company that 
actively monitors and optimizer caffeine levels. So stop by and fill your cup, or order online with our new Dean 
Machine online order form, and get that quality SUrbuzz coffee that you know will meet your caffeine standards. 


And, did wo mention 

Caffnnr Kun. 


mtk>a caffeine? Wc.vc just started funding the guys do inwall the woi 
If you wzinl the latr-st on mffre ami othrr enffrinr prticlitds, stop by 

OURSTORY 


odcrful research at the 
nd pay them ■ vinit. 


W A man, a plan, a caff ⑽ hAAn' Okay, that mAloft a pjilindrom 。 Kiit it rAxultitd in a damn nood cup of 

coffee. St&rbuzz's CEO is that man. and you already know his plan: a Starbuzzon every comer. 

In only a few years he's executed that plan and todiy you can ci^oy SUrbuzz just about anyvtiwrc. Azvd. of course, 
the big ik'ws thas year is Quit Stori>uzz teamed up with Head First readers to create Slarbuzz’st Web presence, 
v^iiidiis growing rapidly and helping to meet the caffeine need^ of a whole new set of customers. 

STARBUZZ COFFEE BEVERAGES 

WeVe got a variety of caffcinatcd beverages to choose from at Starbuzz. indudin^ our House Blend. Mocha Cafe 

Iiitlr, Cippiwiriim, and a favnrili* of our cuKtcrnirrs, CSuii Tra. 

We tilifv offer a wtciy of cuffcc beam, wHolc or ground, for you to take home with you. Order your coffee today 
using our online Bcad Machine, and take the SUrbuzz Coffee experience home. 


❻ 2019,53t«rhuzz Coff«« 

All trademarks and registered trademarks appearing on this site are the property of 



ORDER ONLINE with the BEAN MACHINE 
FA8T 
FRESH 

TO YOUR DOOR 

Why wait? You can order all our fine coffees 
right from ihr Intrmrt with our new, 
automated B«an Machine. How docs it work? 
JuM didcnnthr Rran Madiinr link, nnlrr 
your order, and behind the scenes, your 
mffre i.s mnxtnl, (if you wnnl), 

padca^cd. and shipped to your door. 


W\\tv\ 七 lie bvowsev* is wide, 七 he 
vc\rtidal spade o( -the ma'm 
dov\*tcrv*t a\rca is v-ccludcd ； and 
sidebav* ddv\ dome down ovcv* 
*tKc -foo*tcv-. 


you are here ► 
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a solution for the two-column problem 



Okay, enough already, all 
were trying to do is create two 
columns...why can’t I just write 
some HTML or CSS that easily 
creates two columns? 


Well, actually，you can... 

And to do that, you have to use a fairly new 
capability of modern browsers: the CSS table 
display. What’s that? CSS table display allows 
you to display block elements in a table with 
rows and columns (you’ll see how in just a 
sec), and, by putting your content in a CSS 
table, you can easily create multicolumn 
designs with HTML and CSS. 

Now if you are thinking u why didn’t you 
tell us about this before?” well, it was 
important for you to understand how 
browsers flow and display content (because 
not every design task is going to look like 


two-column display). But now that you 


understand layouts, we can rework the page 


using CSS table display. 




Ai this foih-t, all 
^odc\rir» birowsc^s 
suppo\rt iKis. 


Like all the othcv 

layout solutions, cvch 
■table display Kds 
_*ts adva^-tajcs a^d 
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Chapter 11 


layout and positioning 


How CSS table display works 

You can think of a table like a spreadsheet — a table has columns and rows, and at 
the intersection of each column and row we have a cell. In a spreadsheet table, you 
can put a value, like a number or some text, in each cell. With CSS table display, 
each cell contains an HTML block element instead. 



| 於七 Wis table wc have 十 

vov/s ^ C.oluw'^s, -fov 

a -total o( 12 - tells. 


Let’s say you’ve got a page with three images and three paragraphs, and you want to 
lay them out in two columns with three rows. Here’s how you’d do that conceptually, 
using a table: 

TW,s is tKe (Wsi to\^. . I ， tW,s -table, Kave 

-tWcc vov/s a^d *bwo 



七 he irmd^es in d <dlV>. 
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making two co/umns with css table display 


^|^arpen your pencil 


Given what you know about CSS table displays, sketch out how the two columns 
from the Starbuzz page, "main" and "sidebar", would fit into a table. Check the 
answer at the end of the chapter before moving on... 



Pva>w youv table Kcvc. 


How to create the CSS awd HTML for a table display 

As you can imagine, we’re going to need to add some CSS to tell the browser to 
display our columns like a table, but we also need to add some HTML. Why? We 
need to add a bit of structure that represents the columns and rows of the table, 
and the structure of the enclosing table as well. 

Doing this is straightforward — all we need to do is create a <div> for the entire 
table and then one <div> per row. And for each column, we just need a block- 
level element that is placed within the row <div>. Let’s see how the HTML is 
going to work, and then we’ll come back to the CSS we need. 
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layout and positioning 


Adding HTML structure for the table display 

Let’s step through how we’re going to add structure to support the CSS 
table display using HTML: 


o 


First, well create a <div> that 
represents the entire table, 



Next, for each row in the 
table, we'll create another 
<div> that will contain the 
row content. For Starbuzz, 
we have only one row. 


And, for each column, we just 
need a block element to act as 
that column. We already have 
two block elements we can 
use ： the u main” <div> and the 
‘'sidebar" <div>. 


^harpen your pencil 


Now it’s your turn: go ahead and write the HTML you’ll need for the table 
structure for Starbuzz below. 


^Arrtc 七 he HTML well tittA 
-fov tKc Siavbuzz. table 
display layoui Kcv-c. 
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two-column html solution 

- <^^rpen your pencil 


Now it’s your turn: go ahead and write the HTML you’ll need for the table 
structure for Starbuzz below. 

HcvVs ouv- ansy/cW 


Starbu/? Coffee 


Jf^filf：///rhapt#rl 1/ftiirbLirr/ind^x.l 


C \j[Qr C10091， 


faribuzz 

r\ ffp' P 


..providing all the caffeine 
you need to power your 


ie* ilvInV It 


QUALITY COFFFK, QUALITY CAFFEINE 

At Storbiuz Coffee, wc arc dedicated to filling all your caffeine needs 
through our quality coffees and teas. Sure，we want you to have a great 
cup of coffee and a great coffee experience 02 well, but we're the only 
company that actively monitors and optimizes caffeine levels. So stop by 
and fill your cup, or order online with our new Bean Machine online order 
form, and get that quality Starbuzz coffee that you know will meet your 
caffeine stAndard£. 

And, did we mention caffeine? WcVcjust started funding the j^uys doin^ 
all the wonderful research at the Caffeine Uuzz. If you want the latest on 
coffee and other caffeine products, stop by 

OURSTORY 


uiz. if you want t 
and pay them a v 



ORDER ONLINE with the BL\X MACIOXE 
FAST 
FRESH 

TO YOUR DOOR 

Why wait? Yau can ordrr all Aur finr ertffets 
right from the Internet with our nrw, 
Autnmutrd RrAn Marfiinr. Haw dorx it work? 
Just dirk on thr Rrjin Machine link, enlrr 
your ordrr, And hf hind thr your 

^ffer U roji.ttcd, grourwl (if you want), 


•A man, a plan, a coffee bean' Okay, that doesn't moke a palindrome, but 
it resulted in a damn good cup of coffee. Starbuzz's CEO is that man, and 
you already know his plan: a Starbuzz on every corner. 

In only a few years he's executed that plan and today >x»u can enjoy 
Starbuzz just about anywhere. And, of course, the big news this year is that 
Starbuzz teamed up with Head First readers to create Starbuzz's Web 
presence, which is growing rapidly and helping to meet the caffeine needs 
of a whole new set of customers. 

STARBUZZ COFFEE BEVERAGES 

We'w got 丨 variety of mffcinatrd hrvf ragM to chon^t. from at Starhura, 
inducing our Hohm' Rlrnd, Morhji Cjifc OippiKrinn, and a favorite 
of our cu^tom^rs, Ch«j Tn 

We abu uffer a varivty of ouffet' buaiis, whulc ur gruuiui, fur yuu iu take 
huinc wiiliyuu. Orderyuurouffvv tudiiy usu^uuruiilinc /' 1 ： 1Iiinv, 
and lake the Starbuzz Coffee expcricncv hume. 


© 20i2 t StArbiuz Coffee 

All trademarks and registered trademarks appearing on this site are the property of their respective owners. 



■ fVst, y/e’ll >wva\> cvcv-Y-bK'mj 从 a 七 , s 

501^5 bo be dis ㈣ ed like a table m 
a <d'»v> tailed “tableCoirTbamev' 


"Then, well dv-catc a <div> -for 七 lie 
one v-ow we meed) and well dall 
七 liis <div> w *tablcRoy/ w . 


F^ally, cadli dolumh -fov v/Kidli we liave ocis-tihj 

<div>s mdih ar»d w sidcbav- w ; y/ill be displayed as 
a dell ih iKe table. TKis is a vevy simple table 
layout because i-t has o^ly two dells ； but you 

a lot domploc tKah iWis \f you heed io. 


Lets lrvow y/\r'rtc tiiis m HTML... 



WeVe y\o{, shoWnr^ i*b bu 七七 he ^cadcv- is u^> heve … 


<div id="tableContainer"> 
<div id= n tableRow n > 


i\\t ^ <div> v/it^ av\ \d w *tablcCo^*tamcr 
around u mam w w sideba〆’ <dw>s. 


)) 


<div id="niain n > __ Tlicn ddd *tKc now <div> y/rtii an id w t3blcRoy/ ; 

... also dvound *tKc “mam” and w sidcbav" W <dw>s, 

</div> bui nested inside tKc w tablcCoh-ta'mcv w <div>. 

<div id= n sidebar n > 


</div> 


</div> 

</div> 

.• • ^ - ^ 


_ ' Make suve you pvopcvly ncs 七 youv dlos'mj <div> -tags? 

..and -footev- is down Kcv-c. Make suve you doirZ 七 
mdludc Keadev- and -footev- m new <div>. 
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layout and positioning 


How to use CSS to create table displays 

Now that you know how to add the HTML structure to support the CSS table display, let’s 
look at how we specify the CSS for each element to create the table display. 



First, we added a <div> for the table with the id ''tableContainer”. 
This <div> contains the rows and columns. We style the 
''tableContainer” <div> like this ： 


div#tableContainer { 
display : table; 


TKc w *tablcCon*ta'mcv- w is 七 he 
ou*tc\rmos*t <div> airvd 
tKc Chtiv-C table s*brud 七 u\rc. 



Next, we added a <div> for the row, with the id u tableRow〃. We have 
only one row, with two cells, so we need just one <div>. If we had 
multiple rows, \nz6 need multiple <div>s. We style the row <div> like this ： 


div#tableRow { 

display: table-row 


J\, t ^blcRo^ <div> \TC\>vcsc^ts d 'row m table. 
iVc ov\C vo>w m ouv tsblc, so v/c just v\ttd 

vulc- l-f you Kavc multiple v-oy/s, to^dt^r usmj a 
dass mstcad (c j., dw.-tablcRo>/) so you use 





Finally, we used our existing 、 'main 〃 and ''sidebar" <div>s for the cells 
corresponding to each column in the row. We style these <div>s like this ： 




TV w ma'm w and “sideba/ <div>s are ihc toW^s m 


#main < ^ ou^ -table, so iV^cy tat\^ yi displayed as tabic tells, 

display : table-cell; 

background : #efe5d0 url(images/background.gif) top left; 

font-size : 105%; 

padding : 15px; 

margin : Opx lOpx lOpx 1Opx; 


#sidebar { 

display : table-cell; 
background : #efe5d0 url(images/background.gif) bottom right 
font-size : 105%; 


padding : 15px; 

margin : Opx lOpx lOpx 1Opx; 


you are here ► 
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the css for two columns 


Meanwhile, back at Starbuzz 


••• 


It’s time to add table display into Starbuzz to see how those columns are going to look. To do 

that, we’re going to roll back to the Starbuzz HTML and CSS we created at the beginning of batk a 

the chapter, so open “chapter 11/tabledisplay” to get fresh copies of the HTML and CSS. Edit 

“index.html”，and add the two <div>s around both the “main” <div> and the “sidebar” <div> — 

the outer one called “tableContainer” and the inner one called “tableRow”. Next, open your 

? r 7 you need to. 

“starbuzz.css” file and let’s add the following to the CSS: 


Tiic display: "table pvopcvty w *t3blcCor\*tamcv 

#tableContainer { <div> 七 ha 七 it Will be laid ou 七 like a iak\c 

display: table; 丁 ^ 一 啊岣 adds lOy% o( bordev \p 

border-spacing : lOpx; dells m i\\t -tabic. TK'mk of bov-dev-spa^mj like mav-j'm -fov v-ejulav 

bedduse v/cVc us'mj bov-dev-—spad'mj oy\ tt\U, v/c y\o 
loh^cV' y\ccd mavjms oy\ <div>s (set bclo>w). 

#tableRow { 

TKc w *tablcRov/ W <div> is *fivs 七 

(and only) v-ow in ouv -table- 


#main { 

display : table-cell; 

background : #efe5d0 url(images/background.gif) 

font-size: 105%; remove 

padding : 15px; A mav-j'ms oy\ boiK 

margin :― Opx lOpx lOpx lOpx 

vertical-align: top; 


#sidebar { 

display: table-cell; 


w ma'm w a^d Vidcbav w - 



3o*Ui 七 he <div> 3r\d "tKc 

top left; w S idcbav w <div> arc iKc tells 

•m ouv •table- is m 

-fivst to\ urn 灼 o-f iKc w tablcRov/ w 
(because ii tomes -fiv-st m iKc 
HTML), BY\d w sidcbav W is m iiiC 
se£>oy\d dolumh. 


font-size : 105%; 

padding : 15px; 

margin :― Opx lOpx lOpx lOpx; 

vertical-align: top; 



/Wd v/e Y\tt& -to sdd a fvopev-iy^ vcv-iidal-alig^^ 
"that i^dkes suve dll *tlic doivteivt ih bo*tK Uble 
亡 ells is 

opposed *to tlic middle ov -the bo*t*tom). 
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layout and positioning 


A quick test drive... 

This is great! Our two columns look (almost) 
perfect. Try making the browser wider, and 
then narrower. Notice that both columns 
are always equal in height and we no longer 
have the problem with a column overlapping 
the footer. And we’ve got our content in the 
correct order for mobile users! 

There’s only one tiny little problem, which is 
easily fixed: notice that the spacing between 
the header and the columns, as well as the 
footer and the columns, is just a bit too large... 

Whaf s the problem with 
the spacing? 


Almost 
TKc oy\ly 

issi 

is 七 he 

spa 以 Kcv-c... 


… licvc. 



STfarfeuzz 

jCoffe 


e 


QUALITV COFFEE, QUALITY CAFFEINE 

l s o 聰 08 411 卿扯加 _ 


coffee 


OUR STORY 

W / fw W. ^ Hwt dunsn'l nuke 
I 1 rt!8l J ,| cduio damn ^Hnltnipaf coffee 
3，ndyow rtlrrat *y know his plan: a S«arhu»!(> 


In on))' a 


pahinin>mc, 
Starbiro-'s t:KO is thiil mat 
• trvr.ry aimer. 


STARBUZZ COFFEE BEVERAGES 


.providing all the caffeine 
y° u need to power your 
life. ju*t drink it. 




OKDKR (>\IJNKwr(hlh« HKAIS MA£ ： H 1 NK 
FAST 


TOYi 

Why waiit? You 


FRESi 

(HJKI 


HOOK 


X ^ t? Voucan orfer aU our fine coffc«s 
from the Internet with our new 

Howdow.itv«x>rk? 

ustdtekonthe Dean Machine link, enter 
yof oaicr, and behind liw soudc», your 
⑴巧 ， W ma*!nd, Krm , ntl (if ynu 抑汾 ) 
pitdoifH，umi In yow r 如扑 


We currently have a lOpx bottom margin on the 
“header” <div>, and a lOpx top margin on the 
“footer” <div>. Before we added the table layout, 
we were specifying the margins of both the “main” 
and “sidebar” <div> to have a Opx top margin, so 
the total margin between them and the “header” is 
lOpx, and a lOpx bottom margin. Now ，remember 
that the vertical margin’s block elements sitting 
next to each other collapse — meaning that even 
though we had 1 Opx of margin on the bottom of 
the columns and 1 Opx of margin on the footer, 
this margin collapses into lOpx, so the total space 
between the columns and footer is also lOpx. 


When we removed the margins from the “main” 
and “sidebar” <div>s, we created the 1 Opx of 
spacing using the border-spacing property in 
the “tableContainer” <div> instead. This adds 
1 Opx of space between cells, as well as 1 Opx of 
space around the edges. 


But the space created by border-spacing and 
a margin does not collapse! So we ended up with 
2Opx of space between the header and the columns, 
as well as 2Opx of space between the columns and 
the footer. Fortunately, it’s really easy to fix. 



0^1© file:///chaptcrll/itarbuzz/ind«x.html 


Sfarfeuzz 

PyCoffee 


QUALITV COFFEE, QIJAIJTY CAFFEINE 

Ai Starbuzz Coffee, we arc dedicated to filling all your caffeine needs 
through our quality coffees and teas. Sure’ wc want >x>uto have a great 
cup of aiffcv axidu great uuffoc vxpvricaoc uu wdl» but we're the only 
aiin|Miny thiit jidivrly mnnilur% nnil opliini«v( cnfftniM* Irv^Jn. So .slop l>y 
him) fill your rup, or onl»*r miliiur with mtr nrw Rriin Miichinr nnliiM* 
order form, and get that quality Starbuzz coffee that you know will meet 
your caffeine standards. 

And, did wc mention c^ffeintl Wc'vcjust started funding the guys doing 
all tho wonderful research at tho Caffeine Duzz. If you want the latest on 
ouffee and other aaffciiic pruducUi，stop by and pay them u visit 

OURSTORY 

•A man. a plan, a coffee bean”. Okay, that doesn't make a palindrome, 
but it resulted In a damn good cup of coffee. Starbuzz's CEO is that nun, 
and you already know his plan; a Starbuzz on every comer. 

In only u frw yvnrn rxt%uti*(i tluil plnn anti today you nin irnjoy 

StaHiuxzjiuct nboiil Aim), of cnursu.% I hr big iu，wk IhtN yrar i.H 

that Stariium tciinu'd up with Hirad First nsidrm lo crralr Rlarhiiz 7 .'s 
Web presence, which is growing rapidly and helping to meet the caffeine 
needs of a hIsoIc new set of customers. 

STARBUZZ COFFEE BEVERAGES 

Wc'w gutu variety of cuffciiiatcd bcvcrugcs tu dtousc from al SUibiua, 
iiMJmlini;our Hoa*.r KIcim], Morlui (jifr litllt% (:‘|ipih 、 mo, and a 
rnvoritr of our cuxtmnRnt, Ch-.ii T«-u. 

Wc also offer a variety of coffee beans, whole or ground, for you to take 
home vdlh you. Order your coffee today using our online Dean Machine, 
and take the Starbuzz Coffc« experience home. 


...providing all th« caffeine 
you need to power your 
life, juftt drink it. 



ORDER ONLINE with the BE^N NL\CHIN: 


TO YOUR DOOR 

Why w»il? You enn onlrr ill! our fiiM ； 
ri^ht from thp Internet with nur nrw, 
automated Bean Machine. How docs it work? 
Just dick on the Bean Machine link, enter 
your order, and behind the scenes, your 
ooffc« is roasted, ground (if you want), 
packaged, and shipped to your door. 


C1012. Starbuzz CcAee 
IndemsthM on Uiia wkim mre Ibe prapeitjra^ Uaoir reBpviiiv 


Jot I 0 ? % o( bovdcir spadihj ai iUt io ? ahd botiom 

o+ "the tablod I Opx of mairjih oh tKc a^d -Pootcv. 

The nxayy^s dor!i Collapse wiih i)nt bovdev spadihj, 

9°^ o( spade wKcvc wc wah-t IOp>c. 


so wc vc 
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testing two columns 


Fix the spacing 

To fix the spacing between the header and the columns, and the footer and the columns, 
all we have to do is change the bottom margin of the header to be Opx and the top margin 
of the footer to be Opx. We currently specify all four sides of margin with the shortcut rule 
margin : 1 Opx in the rules for both the header and the footer, so instead, we’ll expand 
that margin property to specify each side separately so we can specify lOpx for all sides 
except the one next to the columns. Like this: 


#header { 

background-color : #675c47 ; Instead <^f Kdv'mj I Op% oy\ dll sides o( iiic 

margin : ― lOpx; Redder, v/e 灼 ow Kavc I Op% o 灼 all sides 

以乙吓七七 he bottom side ， v/WiA has O^- 


margin : lOpx lOpx Opx lOpx; 
height : 108px; 


#footer { 

background-color: #675c47; 
color : #efe5d0; 


text-align: center; 
padding : 15px; 
margin :- lOpx; 




margin : Opx lOpx lOpx lOpx; 


Likewise, y/c noy/ Kavc lOyy. of on 

all sides of 七 he footer 七 he -top. 


font-size : 90%; 


A final test drive of 
our table display 


With this change, our columns are now perfect! 
We have 1 Opx of spacing between all the pieces 
and the columns line up evenly, even if you 
expand or narrow the browser window. 


While display : table won’t always be the 
right tool for your layout needs, in this case, it’s 
the best solution to get two even columns of 
content in the Starbuzz page. 
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C 我 file:///chaptcrll/starbu2z/index.html 


Sfarfouzz 

CjCoffee 


QUALITY COFFEE, QUALITY CAFFEINE 

^ SiQr ^ Coffee, wc arc dedicated to filling all your caffeine needs 

p of coffee and a groat coffee experience as weU, but we're the only 

HCllVul> up— caffcme lc-vek. So,tup by 

^ qua% SUTbuzzcoffcthatyouknow.iJJn.ect 

fnnHingth.gu^doing 

dli ^hc wonderful research at the Caffeine Buzz. Ifyouw^t the latest oif 
coffee and other caffeine products, stop by and pay them a visit. 

OURSTORY 

°°J fcC ^^y.that doesn't make a palindrome. 

3 it rc-ultcdina damn Rood cup of coffee. Starbuzzs CEO is that iLn. 
and you already know his plan: a Starbuzz on evory corner. 叫 

^ hClping t0 ^ - 

STARBUZZ COFFEE BEVERAGES 

W.j'v,f g,,| « nfraffeirwlwl Iwy^ragHsl., (•).■■»»■ rmn. hI Slarhuzy 

mrind ln gOHrHn„«. nl Pn H, Mach, C^fe Utie, Cann.^nn ^ a 

favorite of our customers. Chai Tea. 

ho ™ c Order your coffee tod4> usin^our online Ikan Mach 

and take the Starbuzz Coffee experience hor^. mmc ^ 义山此， 


providing all the caffeine 
you need to puwer your 
life, just drink it. 




ORDER ONLINE with the BEAN MACHINE 
FAST 
FRESH 

TOYOtTR DOOR 

Vyiiy wait? You can orrierAl] out fine mffres 
nght from the Internet with our new, 
automated Bean Machine. How docs it 
work? Just dick on the ikan Machine link, 
enter your order, and behind the scenes, 
yoi^r coffee i£ roasted, ground (if you want)- 
packaged, and shipped to your door. 
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E%^rciS6 


The Starbuzz CEO has decided to add a 
drinks menu column to the Starbuzz Coffee 
web page. He wants the new column to go 
on the left side, and be 20% of the width of 
the browser window. Your job is to add the 
new HTML to the existing page in the correct 
position, and then finish up the CSS below to 
make sure it displays as a table cell, like the 
other two columns do. Check your solution at 
the end of the chapter. 


^_ 

you need to power your | 
iift. just drink it. 


The HTML for tV>c 怕⑽ 




BKVKRAGES 

Mouse Maid, $i . 49 

Martw CakfUttn. 

$ 3 - 3 S 

Cappuodno , 拿 1.^9 

Tot. si.es 

elixirs 

冰 •pnxidRyMrw 

Wn bnm^ by our 
at the Head 


Coowmntfoo, S2.99 
®»b«nyBlUi I3wr, 

Oanbmy 
Ai»6ocrid*nt Hast. 

拿 3.99 

Chiller, $a.99 

HidiBrtlnBrew. 

•a .99 


<div id="drinks"> 

<hl>BEVERAGES</hl> 

<p>House Blend, $1.49</p> 

<p>Mocha Cafe Latte, $2.35</p> 

<p>Cappuccino, $1.89</p> 

<p>Chai Tea, $1.85</p> 

<hl>ELIXIRS</hl> 

<P> 

We proudly serve elixirs brewed by our friends 
at the Head First Lounge. 

</p> 

<p>Green Tea Cooler, $2.99</p> 

<p>Raspberry Ice Concentration, $2.99</p> 
<p>Blueberry Bliss Elixir, $2.99</p> 
<p>Cranberry Antioxidant Blast, $2.99</p> 
<p>Chai Chiller, $2.99</p> 

<p>Black Brain Brew, $2.99</p> 

</div> 


QVAtJTV COPPER, QUAIJIY CAFFRmF. 

證麵戀賢 

OUR STORY 

' 變 m 爸驗 

麵 _f 

STARBUZZ COFFEE BE\TRACES 


ORDER OXI J>fF. viith (he BFA\ 
machine 
fast 

PRKSH 

TO YOUR DOOR 

W>«yi«|l?Youow order all otir 

enlcryour order, and behind the 
Jccno: >vur cofTccts roasted 
padded. 

**wpp«il to>x>ur door. 


dioosc 

MoctuiCafe 


r your coffee today 

StftrbttZE 


ttcvc^s Koy/ ilic CBO y/ahts iKc 
S-tairbuzz. fage io look y/iih 
"the hOw 匕 olurvm oh *tKc 七 
^Oh-tolih*mg 七 lie dvihks me^u. 


丁 ^ _ CSS...” “ U “ • 七 ― 



#drinks { 6^^-Fill ir. tKis bla^k h> get the 

_ ; dv-'mks <div> -to display as 

background-color: #efe5d0; to \^ ih ?a 

width : 20%; 

padding : 15px; 

vertical-align : top; 


you are here ► 
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questions about css table display 


iJiereiare nQ 

Dumb Questi9ns 


So, I know we’re not covering HTML tables until 
later in the book, but is the CSS display: table similar 
to using HTML tables? 

It is similar in the sense that you’re creating 
structure in your HTML that you can map to the rows 
and columns of a table. But unlike HTML tables, CSS 
display-table is all about presenting the content in that 
structure using a table-like layout. HTML tables are for 
tabular data: data that should be structured as a table. So, 
using CSS display-table is a way of creating a certain kind 
of presentation layout, while HTML tables are all about 
structuring your data. You’ll learn all about HTML tables in 
Chapter 13. 

What do I do if I need more than one row in my 
table display? 

If you need to display content in multiple rows, then 
you just add more HTML structure to support that. If you 
take a look at the Starbuzz HTML, you’ll see we have two 
columns (or three, after you add the Beverages column) 
in one row. To add another row, you’d add another 
<div> similar to the “tableRow” <div>, nested inside the 
“tableContainer” <div>, and containing the same number 
of columns as the first row. You can keep adding rows by 
adding more <divs> like this. 


Why did we add the vertical alignment to each 
cell in the CSS with vertical-align: top? 

We added vertical-align: top to each table cell to 
make sure that all the content aligns with the top of the 
cell. If each cell is aligned this way, then the content in 
each of our Starbuzz page columns should align at the top, 
which makes for a more professional-looking presentation. 
If you don’t add a vertical alignment, you may find the 
default alignment in your browser is set to middle instead. 
In some cases, that might be what you want, of course! 

You can set the vertical alignment to top, middle, or bottom. 

Does it matter how much content I put in a cell? 

Not really. You’ll probably want to make sure that 
no one column has so much more content than other 
columns that your page looks unbalanced, but ultimately, 
it’s up to you and how you want your page to look. 

Can we control the width of the columns? 

Yes, you have some control over the width of the 
columns with the width property. In the exercise to add 
the Beverages column that you just did, you probably 
noticed that we set the width of the column to 20%. You 
can set the width of each column like this (and it’s a good 
idea to make sure the widths add up to 100%!). By using 
percentages, your table will still expand and contract 
appropriately as you resize the browser window. 
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Chapter 11 


layout and positioning 


Strategies for your CSS layout toolbox 

As you’ve seen, there are a variety of methods you can use to lay out your 
pages using HTML and CSS. And we didn’t have to change the HTML much 
to change the layout of the page; other than moving a piece of content around 
(for handling the floating sidebar), and adding a couple of <div>s (for the 
table display layout), you handle the presentation of your content entirely with 
your CSS. That’s really the idea: your HTML should be all about structuring 
your content, and the CSS is what handles the layout. Which method you 
choose for doing that layout is up to you and is going to depend on the kind of 
layout you choose and how flexible you want it to be. 

Let’s review. 



The Floating Layout 


We used float to lay out the lounge page and float the elixirs 
<div> to the right of the main content in the page. In this case, 
float was perfect because we wanted the main content to flow 
around the elixirs <div>, which it did just beautifully. We haven’t 
used it this way yet, but float also works great for floating 
images within a paragraph of text, and having the text flow 
around the image. 

We then used float to float the sidebar <div> in the Starbuzz 
page, and used clear to make sure that the floating sidebar 
didn’t overlap with the footer. 

The big downside is that we have to move the entire <div> we’re 
floating above the main content of the page, which isn’t always 
optimal if that ordering doesn’t reflect the relative importance of 
the content in the page. Another potential downside is that it’s 
impossible to create two equal columns of content with float, 
so if that’s your goal, you’ll need another solution. 





otirige 
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yi— 4 i 

0 > 4 h y »» 0 — fc« 4 _ _ ，■晒 

tot* Cnlbr ca^fV^cr Imm. 




t* . .aaltlMvHaC 



Ploai v/ov-ks gv-cai -fov- iKc 
louhy page ； it’s okay -fov- 
Stairbuzi, bui y/e’d like io 
keep ilic sidebair dohichi 
below 七 lie main doh*tch*t 

li^vc dolurvms. 


The Jello Layout 

Next we created a frozen layout by wrapping a fixed-size 
<div> around all the content in the page, and then we made it 
jello by allowing the margins to expand with the auto property 
value. This makes for a great-looking layout, and lots of pages 
on the Web use this design; for instance, you’ll see a lot of blogs 
set up this way. This also solved the problem of our content 
ordering. The disadvantage here is that the content doesn’t 
expand to fill the entire browser window (which many people 
don’t find to be a disadvantage at all). 



Jello gives you a 
widely Ccr\i,cred, 
•fixed — sizjc 3rc3 
of 6or\icy\i 
wiiK e^fa^dable 

w»a\rjihS. 



you are here ► 
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overview of layout techniques 


Strategies for your CSS layout toolbox (continued) 


The Absolute Layout 


Absolute jives you a hide 
liquid maih doirteirt 3\rea 


li^uu 


We then used absolute positioning to get back to a liquid 
layout, and this also allows us to keep our content in the order we 
want. By setting the sidebar to a specific width, and positioning it 
to the right of the main content, we have a main content area that 
expands and contracts with the size of the page, and a sidebar that 
stays fixed in size and is anchored to the right side of the browser 
window. This is a great choice for layouts when you want one 
part of your page to be fixed in size and one part to expand and 
contract, or when you need an element to be located at a precise 
location (we’ll see how to do that shortly!). 

The downside for the Starbuzz page, however, is that the sidebar 
overlaps the footer again when the browser is wide. So we 
continued in our quest for two perfect columns, and moved on to … 


a -fi^cd sidebav*. 



Sl«rbM«Co#CC 


Coffee 


(FFEE, QUAUTY CAFFEINE 


, ^ 


QC A 1 JTV COFF 

SHy ooffcea aad !«■&. 9ar«, «c «o« to iu«« a great cap 

of oafk« aad • pm oo<r«« nprr^caor m ivriL bul wc.r* ll» Mly coR|tta^ 
tlal nmitare ud *|<auK« affoac k\«k. S • 眞 op V)i ud fid your 

oe c r4*r c«Sm «>kh o«r ww BMn Madiiat ooAjm er4*r form 麵 4 ft* 
lkMl«|Mbl; SUj^uucsfW* tW kww wdl pur aJTvaat 

(Uadirte 

Am! dki «<• wabon >art «un«4 th« 91 )* Asing a! 

(Ac ocniafalrcMrciMtiKCi^c'jK K- /- VyottwaMlkeklntMconM 
•xd other e^VctM ptodiKU.«c9b7«n4p««lhcB«vMtt. 

ouksttoiiy 

*Aaa»,«;Aia^acafk«bun*.4Jim,«ftuldc«Hi>iuk*aDdbn^rofw baltt 
rmJiNlIn iid^aa 

kmw ki« pkft ： • SlAriuMoa cvtfj comer. 

teoa)f afn*yc«r>bc'auc«uicd*MDlifiKadto<livy««oMC^)oySiufe«B 

iual afeoal«>y«f«t«. And. «fcc«m.a»U|nni9tha rear i»U»: Status You (aaorAer *11 o«r (1 m effect 

ImimI ， Wtk Maad Rnt r«ad«ra to ctmI* fitAHMos.* W*b ! ri(ta lh« laurvaf «ilh our mw. 

—1 k» lucd ibe caftcim 匿 oitqf • winlt I MlMMlidBHall«faia».lbw4oMitw«rk7 

ncwMt«4culo«icnL j /uadMkoottelleaaMAdUaeUaltcnin 

llTZZ OOFFCE BKVERACES 

lavamt>of ca(f»ulrd hfwngn to • 

** MmJL'" * 


iisdMoaefra 


«amoD tac oean nicnuK uvk nun 
Kwm.y—r 

ttMunL ud akiffinl %• jw <Imn • 


Wc alio offer ti«ne(yo<oMta*beuM. «Aok DrjertMBd.f«rycutc 
he«r wtk jtm. OrW^nareaflM mngMroi&w K- n M>. 

ukr lk« Ku«b«JB C^'it€ M^criaaot haw. 


.SUrtuBCalfc* 

u^eathkatowtkapsopartroftlMirn 



At GUrbaoB Coffee. are dMlicatol to (Sbag tMyomr caffetm aeeda 

thr«M||i mmtfaihtjaifir** and t#M. ftirr. w» Mint ^outoK«*r •crrM 
capo^cofTrt and a great coffer uperirsn m«« 1. bal w.rt IW cnl> 
cooipuiyttui actmly Boaitora MidoftMajn orffeiae levels. Soilopbjr 
«ni(ll)»wrcf ,oc-o»dc»o«ltii«w>l»—r«r»fc»n>UE>fa«—tew 

foraa. that Aarbtm eo/I«« (Wl yom taow wB in*<4 


tt W«V* jttl «| 

:Um> Vfm* B 

)ducu,ftopbv 


The Table Pisplay Layout 


lA/iiK -table display, 

>wc go*t CVCir» 

With the table display layout, we hit the jackpot of layouts for “丄 “ u 
Starbuzz. We did have to add a couple of <div>s to our HTML 
structure to get it to work right, but that paid off with two perfectly 
aligned columns that expand and contract beautifully with the size ■… - 

◦ 丄 J C 我 r j m» n/di 

of the browser window. 

In this case, the structure we added to the page was purely in 
support of the layout; it didn’t add any meaning to the page. You’ll 
find that <div> is often used that way (and in fact, when you get to 
the next chapter, you’ll see this is even more true today than it was 
just a few years ago). But don’t go <div> crazy; you want to pick 
the best layout for your needs and add as few <div>s as necessary 
to get the layout you want. 

Table display layout isn’t always the right choice for layout, but for 
Starbuzz, it works perfectly and even let us easily expand to add a 
third column for the Beverages menu. Nice! 


farfeuzz 

.providinc all thf 

Coffee 

life. Jast drink it. 


B Amin.«plan.i<*^fcebeitd > .Oftaor.tk««4ocni>inikeapaliiiilrcaM. 
bal it mJlcd n a daan good c«p ef mffm. SUibmB'$CiX)mthtt nan, 
Mai yog tkw»df tao>w kit giUm »9utbtaaiomevt^r toner. 

In on^r • few yc«n he’i ONUed that |Au> aa4 loia> an agoy 

Surhimjt abouiiyMWft. AndLoaeourw.A*lK|arw»»hiiywtt 
that SUt^mib tetmedtp will Head nm rt«dmio (roue SurtNio** 
Wok frmnnm, »wfcki> byrmafrf idljr «mI nMt rnffaim 

need* of a whok a*wMr(«f autonwr*. 

STARBUZZ COFFEB •KVERAGKS 

WeV» sot* variety of cafknalcdbmngntockooaefrooalSUfbtta. 
iMladiBgoar HooMHn^lloABCkC>ljn^QfpaaaBo,Mda 
UrrorU of oar wtaawm t** 

W» tko offer • varwti ofcotfr* beaa*. wtolrorironi, for vqu'-o ukr 
knMi«ikyou.Or4eryi>v coffw tod^riuaaiotf oafeM Ben 
•nd take the 9Karb«BColf«c*avcnnMrhaflML 


Wfe^wM? Ym (snorter al mt flue ooflee* 
ri^it frvtn tft« laUnwt om mtw. 
MfoarjAni Htm Marfmr it 

M«fc? Jim dkko«(hr Bcm UKhioe Ink. 
Mttrjrov order, «aib*hiailhcwn»«, 
y»ir cuffec it ruutn^ (n«ad (If yui M^nlX 
p*ifafiiHL mi fSi|iy>i>o d»or. 


C »ma.Star^«aOrfb* 

d tadMuHa <■ Mm Mi m • 


There are as many page designs on the Web as there are 
designers, but many of those designs are based on the layouts 
you’ve learned about here (or some variation of these). You 
now have several strategies in your layout toolbox to choose 
from, so you’re in good shape to handle just about any layout 
job your boss might throw at you! 


Table display is easy *to 

-to move dolumy\s (or vov/sf). 
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layout and positioning 



Hey, the site is looking great, and 
I really like the CSS table layout, but I 
noticed that the header at the top with 
the logo and the slogan doesn’t expand with 
the page. I mean, it feels like the slogan 
should move to the right if I expand my 
browser window. 


Yup，we agree. 

Except for the header, the Starbuzz page expands nicely as you 
make your browser window wider. Thanks to the CSS table 
layout, the columns expand proportionally as you expand the 
window, and because the footer text is centered, the footer always 
looks like it’s in the middle of the page, whether the page is 
wide or narrow. But the header doesn’t expand as nicely. The 
background color does, but the Starbuzz slogan always seems 
stuck in the same place, while you might expect that it would be 
anchored to the right side of the window. 

The reason the header isn’t expanding with the rest of the page 
is because the header is one image with both the Starbuzz logo 
and the slogan in it. And that image is exactly 800px wide. If 
your browser window is opened wider than 800px, you see a lot 
of extra space over on the right. And likewise, if your browser 
window is narrower than 800px, you’ll see the image fall off the 
side of the browser window. 


Gan we fix it? 



you are here ► 
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fix the header image layout 


Problems with the header 

Go ahead and play with the page a bit by opening your browser window wider than the 
header image，and then narrower than the header image. You’ll see that the header isn’t 
working quite like we’d like it to yet. 

v/b 七 he browser is ^av^rov/cr 七 ^00^ 
^ iKc 7 oy/sc,r is moire ，如 s | 0 _ ‘ay falls 

^d t) you yi dll iKis s ? au —\ oW 妞 e edv of 如 Wov/scr vimdoJ 

ovcv Kcvc to tlic viglii. x 



C ft © fl^€：///chapter 1 l/$tarbuzz/Index.html 


Sfarfewzz 

^/Coffee 



...providing all the caffei 
you need to power yo 
life, just drink 


BFVKRAGE53 

House tttend, S1.49 

Mcmha Qifir IjiIIk, 
^'：ij 

doo. $1.69 

»S1.85 

RUXTR53 

Wc proudly serve 
dixirs brewod by 
oar friends it die 
lieid Hnt Lounge. 

(Tram Ttn Cnnlcr, 

w 

Raspberry Ice 

Coficencration, 

$v.yv 

Blucben- Bliss 
Elixir. $2.99 


Antioxidint lflast. 
* 2.99 

Cluii QiilliT f $».yy 

Black Bnln Brew. 
$2-9«> 


V^- 


丁 lie vest of *tlic page vesiz^s hi^ely as you 
v/idch a^d havv-ow ilic bvoy/sev y/'mdoy/. 


QUAUTY COFFEE, QUAIJTV 
CAFFEINE 

At Starbuzz Coffee, wc arc dedicated to filling all your 
caffeine needs through our quality coffees and teas. 
Sun 、 wr wnnl you to hnvr« f^rrat cup of enffre ancln 
great coffee experience as well, but we're the only 
company that actively monitors and optimizes 
atffrinr IrwJs. So itinp by and fill ytnir cup, or cmlirr 
online with our new Bean Machine online order form, 
and get that quality SUrbuzz coffee that you know 
will nwrt your aiffrim* !Etnndard.i. 

And, did wc mention ot^ffeine? WeVe just started 
funding the RuyK dnii^K aH I hr wondrriful n«r4»rdi al 
the But-a If you want the latest on coffee and 

other caffeine products, stop by and pay them a visits 

OUR STORY 

"A man, n plan, a aiffn* h**an H . Okay, that doesn’t 
miikr n paliruirtimr, hut it muiltrd in n cbimn Rnod 
cup of coffee. Starbuzz's CEO is Hurt man, and you 
already know his plan; a Starbuizon every corner. 

In only 丨 few years he's executed thst plan and today 
you can ciyoy Starbuizjust about anywhere. And，of 
cniirsiT ， th(* news thi.% >*rar is that Starbiizz Icjimrd 
up with Head First readers to create St&rbuzz's Web 
presence, which is growing rapidly and helping to 
mwH I hr enffrinr nriiiss of a whole new »*l of 


STARBUZZ COFFEE BEVERAGES 

WeVe got a variety of caffcinatcd beverages to 
c^umikt frnmak Stnrhtuo, indudin^our Hmr.i Hlrrul, 
Mocha Cafe LAtt«, Cappuedno. and a favorite of our 
customers, Chai Tea. 

We also offers variety of coffee beans, whole or 
ground* for you to take home with you. Order your 
coffw? today usin^ our online Kwin Marhmr, arul tnkr 
the Starbuzz Coffee experience borne. 


C 20 i 2 , SUHivu Cotffoe 

AH trademuki and registered tndemarki appearing oa this ntc arc die property of their respective c 


ORDER ONLINE with the ! JEAN 
MACHINE 
FACT 
FRESH 

TO YOUR DOOR 

Why wait? You mn onlcr all our 
fine coffees right from the 
Internet with our new, 
mitomnti*(l Kran How 

docs it work? Just dick on the 
Dean Machine link, toier your 
onkir, iirui hciiind I hi? 
your coffee is roasted, ground (if 
>x>u want), paidugcd. and 
shipfMtl to your dnor. 





If we split the header image into two different images, one with the logo and one with the slogan, 
can you think of ways you might lay out the two images in the <div id=“header”> element so 
they are positioned correctly (that is, the logo stays on the left of the header, while the slogan is 
always anchored to the right part of the header, even if you open up your browser window)? 



lA/e easily sp|i*t "tlic lic^dcv* in*to *ty/o 

9'*f i^^ges filicy boiK liave a iv-«ihspav-chi …晃 1:: [the 阁 

badkgv-ouhd v/iiK a maitc iliai y/ovks 11:0 3 卿爾 

fcv-fcdily wiili ouv* fio-f-fcc-dolovcd Mfc j 棚 ■]： : - L 

badkgvouhd dolov* m *tKc Keadev*). 
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layout and positioning 


Fixing the header images with float 

It’s often true that there are multiple strategies to solving a layout problem with CSS, 
and that’s certainly the case here. The way we’re going to solve it is to use float. You 
already used float once, to lay out part of the Starbuzz page, before we switched to 
using the CSS table layout. But there’s no reason you can’t mix and match different 
strategies, like table display with float in the same page; in fact, it’s very common. So 
let’s take a look at how we’re going to do this. 


o 


Split the header image into two images 

We already did this for you; you’ll find the images “headerLogo.gif’’ 
and “headerSlogan.gif’’ in the “chapter 11/starbuzz/images’’ folder. 



KcadcvL-ojoj'i-f 







Kcadcv-Sloja^ji^ 


Update your HTML to use these images 

Next, you need to update your HTML to replace the existing header 
image, which is one big 800-pixel-wide image, with the two images 
we created in Step 1. We’ll go ahead and give each image an id that 
we’ll use to select each of them in our CSS. 


Mfc j 翻 t : Lr:smk : - .L 


<div id="header"> 

<img sre= 11 images/header. gif M alt= n 3tarbuzz Coffee header image M > 
<img id="headerLogo" 

src="images/headerLogo.gif" alt="Starbuzz Coffee logo image"> 
<img id= n headerSlogan" 

src="images/headerSlogan.gif" 

alt="Providing all the caffeine you need to power your life."> 

</div> 


❺ Fix the images with CSS 


Finally, you need to get the images laid out in the header correctly. If 
you load the page now, you’ll see both images in the header, right next 
to each other over on the left side of the page. 


丁 he logo image looks okay where it is … 


O Starbuzz Coffee 




wtk sloja^ • 你 ay is to lojo 

image. Wic bo move it ovcv* heve CSS . 、 


O A O file:///chapterll/starbuzz/index.html 



Sfarfetizz 
7 Cofftt 


...providing all the caffeine 
you need to power your 
life, just drink it. 
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testing the header image 


EicegciSe 


This CSS is so easy you could probably do it in your sleep, after all the layout experience you’ve 
had in this chapter already. Go ahead and write the CSS to fix the images in the header. You 
know you’re going to use float; fill in the blanks below with the rest of the rule you need to get 
the images into the right place. Check your answer at the end of the chapter before you go on. 


float: 


Test drive your float 


Get your CSS updated in “starbuzz.css” and reload the 
Starbuzz page. You should see the header slogan image 
all the way over on the right side of the page, just where it 
should be, and, better yet, it stays over on the right even if 
you open your browser really wide. Success! 


How float works in the header 

Remember the steps for how to float an element from 
earlier in the chapter: 

Give the element an identity. We gave the image we 
wanted to float the id “headerSlogan”. Check. 

Give the element a width. We didn’t actually have 
to do that explicitly this time (although you could). Why? 
Because an image element has a specific width by default: 
it’s the width of the image itself. CSS recognizes that the 
image has a width, so we don’t have to specify it ourselves. 


Now 七 he slogan irma^e is all 七 lie way ovcv on 
七 lie v— 七 , and i 七 stays 七 heve, even i-f you 
bvoy/sev window siz^c. 




li I 


Su^uk Coffee 


At 


BEVERAGES 
House Blend, $1.49 
Mocha Cafe Latte, $2.35 
Cappuccino, $1.89 
ChaiTea, $1.85 

euxirs 

Wc proudly serve elixir? 
brewed by our friends at 
出 c Head Fint Lounge. 

Green Tea Cooler. $2.99 OUR STORY 


quautv coffee, quautv caffeine 




Raspberry Ioc 
ConoeDtralion, $2.99 

Bluebeny Bliss Elixir. 
$2.99 

Cnuibcny Antioxidant 
BUst, $2.99 

Chai Chiller, $2.99 

Black Brain Brew, $2.99 


以 tr， an — a,rcad - vknowh 一 a 


Float the element. Check, we floated it. The <img> is 
nested in the “header” <div>, so it floats up to the top 
right of the <div>. But remember, we set the height of 
the header to be exactly the same as the height of our two 
images. And, as we explained before, the other inline content in the 
page will flow around the floated element. In this case, the other 
inline content in the header is the logo image, which happens to also 
be exactly the same height as the slogan image and the header. So 
the two images line up perfectly! 


STARBUZZ COFFEE BEVERAGES 
C ^ppwano.anda favorite of ouroistomcrj, ChaH tv . 


ORDER ONLINE with the BRAN 
MACHINE 
FAST 
FR£SII 

TO YOUR DOOR 

W^y wait? y ou can order aU our Hue 
coffees right from the Intcmct with our 
5 CW, aut omatcd Bean Machine. How 
1 丨 work? Just dickonihc Bean 
Machine link, enter your order, and 
oe/undthc scenes, your coffee is roasted, 
ground(«fyou want), packaged, and 
siiippcd to your door. 


，一 —— 一 
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Dumb Quest! 


9ns 


Why didn’t we have to add “clear: 
right” to the “tableContainer” <div> 
below the header? 

Because the image we floated is the 
same exact height 一 108px as the other 
image in the header, so there’s no room for 
the other content in the page to move up and 
flow around the floated image. Both images 
take up the exact same amount of vertical 
space, so the other elements in the page 
stay firmly in their places. 


What if I float an image that’s in a 
paragraph of text? 

Then the text will flow around the 
image. It works just like when we floated the 
elixirs <div> in the lounge; remember how 
the text in the rest of the page flowed around 
that <div>? Same thing if you float an image. 


Could we have positioned the 
header images using one of the other 
layout strategies we talked about? 

Yes, indeed. There is usually more 
than one way of doing things in CSS. 
Another strategy might have been to use 
absolute positioning. We’ll look at how to 
absolutely position an image next. 



Hey guys! Starbuzz just won the 
Roaster of the Year Award. This is 
huge. Can we get it on the page front and 
center? All our customers need to see this. 
Top priority; make it happen! 


The awav-d 

Well, we could just throw 
this as an image into any old 
paragraph on the page, but 
the GEO really wants this 
to be noticeable on the page. 
What if we could place the 
award on the page like this? 

Not only does that look great, 
but it’s exactly what the 
GEO wants. But how? Is this 
another situation for using 
float? Or are we going to 
need another strategy? 



Wc proudly »ctvc 
tlixin brawod by our 
(ricnd» at (he Head 
Mnt LounRt. 


And, did mention oqfftinn? W«V»juct curtni funding 
the RuysdoincAO the wonderful research At thtCalftiiM 
Buxz. Ifyou want the latest oBooffecaadothcmffciae 
products, stop by and pay them a visit. 

OURSTORY 

"A nuin, a plan, a coffee bean". Okay, that doesn't malsc a 
ome, but it recultMl in a d^mn |{ood cup of ooffM. 
Starbuxz'f CEO is that nun, and you already know his 
plan: • Surbuzz on every comer. 

In only a few years lie's executed that plan and today >xni 
enjoy 8tarbica)ust about onyv*4wrp. And. of counr, 
the bin ne%vs this year U that Surbuzz framed up with 
II4UU1 Rr*t to crtMe Surbuxz’t Wrb pr««eno», 

which is Krowinn rapkUy and bdpinft to meet the caffeine 


ORDF.R 0!«n with th« 

MACHINE 

FACT 

PRESH 

TO YOUR DOOR 


Why wail? You can order 
fuse codecs rigM from llu 
with our new, automated 



all our 

A from Ihc Internet 
mated Bean 
Machine. I low docs it work? Ju5t 
dkkon thft B^Jin Madun«lm 
enter your order, iod behind the 
socqc«, your coffee u roasted, 

).packaged, 
rdiwr. 
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more absolute positioning 


Adding the award 

Notice that the award is sitting in a position that overlaps both the header 
and the main part of the page. It would be pretty tricky to get a floated 
image into this position. Not only that, but we know the award shouldn’t 
affect the flow of any other elements in the page. 

This sounds like a job for absolute positioning. After all, by using absolute 
positioning you can place it anywhere you want on the page, and since it 
isn’t in the flow it won’t affect any other element on the page. Seems like an 
easy addition to make to the page without disrupting what’s already there. 

Let’s give it a try. Start by adding a new <div>, just below the header (the 
GEO thinks this is pretty important, so it should be up high in the order of 
content). Here’s the <div>: 


<div id=" award"> 



<img src="images/award.gif" 

alt="Roaster of the Year award"> 


</div> 


The <div> 

匕 oivta’ms -the 
o-f -the 

3v/a\rd- 


Positioning the award 


We want the award to sit just about in the middle of the page when 
the browser’s open to 800 pixels (a typical size for browser widths) and 
just overlapping the main content <div>. 

So we’re going to use the top and left properties to position the 
award 30 pixels from the top, and 365 pixels from the left. 


#award { 

position : 
top : 
left: 



1/VcVc us'm^ art absolute fositioir» 

absolute; -fov- -tV^c av/avd <dw> is ^>0 

30px; 户从卜 "(Vom tte and 冬厶弓 

365px; ^»%cls -fv-om ttc Ic-ft 


Add this CSS to your “starbuzz.css” file, save, and reload the web page. 
You’ll see the award image appear like magic, right where we want it. 
Make sure you resize the browser to see how the award displays. 


■ C SurthiM Co/ttt 


§forbuzz 

yCoffct 




'beverages 

Hook Bend. S1.49 

Mocha Cile laoc, 
9 Z 3 S 

ttpffacdDo. $1.09 

UudTct. 9 i .85 

P.UXIRS 

W* proudly m«vr 
brewnj by our 


Wtte6cn>«i*» Uijdr. 

nr»nbmy 
AndoxUlant BUst. 
92.99 

OuiChaUr.sa.99 


« 2-99 


quautv coffee, QUALITY CAFFEINE 


A* StubwaCofftm, 


caffeix 

wvai 

coffee 

Uutac 


,dedicated to HlUngall y 
ugh our quality roffeo and lr. 


S 尋學 ■ 

you ko>H will (uoft yourcaffeim 


Machine oolL 
SUrbazxco/fe« 




OI^R .STORY 




otarbuzz coffee beverages 

rUnnur&'tn,. arwl > f ••一 _ _ t 


'• *od*f*%t>nt*ofo 


Wc also offer a 
for )sx>uto 


Coffee, 




exp«ricooe home. 


.providing al 
you need t 
life. 







ORDKR 0>TUNKwtthth« HKA> 

machine 

vast 

fresh 

TO YOUR DOOR 

Yob 

fine a>f!fc« right fromtiic Interne 
術 n*w, amonwiwj Rran 
Madiinr. How doc»：t work? Just 
didiomhc Bcm Mochinr Unlc. 

«m«r your order, uui behind the 
your cofTccb routed. 
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Seems like absolute positioning is 
better than float because I have more control 
over where the elements go. Should I prefer 
absolute positioning over floating? 

A- 

r \* Not really; it just depends on what you 
need. If you really need an element to appear 
at a precise position in the page, then absolute 
positioning is the way to go. But if you want to, 
say, have text flow around an image, you can’t 
easily do that with absolute positioning; in that 
case, you’ll definitely want to use float. You’ll find 
uses for both fairly regularly. 


I was playing with a couple of absolutely 
positioned <div> elements, and one always is 
displayed on top of the other. Is there a way I 
can change which one is on top? 


Yes, every positioned element has what 
is called a “z-index,” which is the ordering of the 
elements on an imaginary z-axis (think of it as 


pointing out of your screen). You use i 

#divl { 


position : 

absolute; 

top : 

30px; 

left: 

30px; 

z-index: 

1 

0; 

J 

#div2 { 


position : 

absolute; 

top : 

30px; 

left: 

30px; 

z-index: 

1 ； 


Those rules would place the element with id “div2” 
on top of the element with an id “divl”. 


How do I know what z-index each 
element on the page is by default? 

You don’t really, unless you inspect the 
CSS the browser computes for each element in 
the page with developer tools. But most of the 
time you won’t care about the z-index of elements 
unless you are specifically layering them or you 
run into a situation like we did with the award. 
Usually just setting the z-index to 1 is good 
enough to make sure an element is above other 
elements in the page, but if you have multiple 
elements you are positioning and layering yourself, 
you’ll have to be a little more deliberate about the 
z-index values. 

Is there a maximum z-index value? 

Yes, but it’s a very large number, and 
practically, you'll never need your z-index values 
to go that high. 

What about negative z-index values, can 
you have z-index values of, say, -1? 

Yes, you can! The same rules apply (that is, 
the more positive and larger the value, the higher 
the layer, and the closer it is to you on the screen). 

Can any element have a z-index? 

No, only elements that have been 
positioned with CSS using absolute, relative, or 
fixed positioning. You’ll see an example of fixed 
positioning next! 
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we need fixed positioning 


Hey, can we get a coupon on the 
site and put it right in customers* 
faces so they can’t miss it? rd 
like to offer one free coffee to 
everyone who clicks on the coupon- 
for a limited time, of course. 



Just the words we’ve been 
waiting for: “right in the 
customer’s face.” 

Why? Because it’s going to give us the 
opportunity to try a little fixed positioning. 
This is the last kind of positioning we’re 
going to use in the chapter, so let’s make it 
fun. What we’re going to do is put a coupon 
on the page that always stays on the screen, 
even if you scroll. Is this a great technique to 
make your users happy? Probably not, but 
work with us here ...it is going to be a fun way 
to play with fixed positioning. 



imii 


free 


€OFFI?k 


530 


Chapter 11 








layout and positioning 


|rv\^vess -fvicnds and 6o>wo\rkc'rs by 
vcW'rnJ -bo bro>NSCV Wmdow as 
viev/pov" 七 . Tvy I 七一’七 v/ov-ks, a^d 
WC VilUodl af^ovmjly. 



ttevVs v/iiCV"C dcmcy\*t JC*ts 

Positioned i\\t viev/fov-t. 


How does fixed positionmg work? 

Compared to absolute positioning, fixed positioning is pretty 
straightforward. With fixed positioning, you specify the position of an 
element just like you do with absolute positioning, but the position is 
an offset from the edge of the browser’s window rather than the page. 
The interesting effect this has is that once you’ve placed content with 
fixed positioning, it stays right where you put it and doesn’t move, 
even if you scroll the page. 

So, say you have a <div> with an id of “coupon”. You can position 
the <div> fixed to a spot 300 pixels from the top of the viewport, and 
100 pixels from the left side, like this: 


ttev*e’s 七 he id sclcd*tov- 
-fov 七 he do 叶 on <div>. 




usihj -fixed 
posi-feiohihj. 


#coupon { 

position : fixed; 
top: 
left: 



300px; 



position i\\t toufo” 100 pixels 
i\\t -bo^ 100 pixels 
-Pvom 七 . C3y\ also use 

vijil-t a^d bo*t*tom, just like v/i 七 h 
absolute positio^'mj. 




100 

fi%cl 


s 




Once you’ve got an element positioned, then comes the fun: scroll 
around … it doesn’t move. Resize the window.. .it doesn’t move. 

Pick up your monitor and shake it.. .it doesn’t move. Okay, just 
kidding on the last one. But the point is, fixed-position elements 
don’t move; they are there for good as long as the page is displayed. 

Now, we’re sure you’re already thinking of fun things to do with 
fixed positioning, but you’ve got a job to do. So let’s get that 
coupon on the Starbuzz page. 


div id=“coupon” 


Vo 
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adding a new div 


Putting the coupon on the page 


Now we’re going to get the Free Coffee Coupon on the page. 
Let’s start by creating a <div> for the coupon to go into: 


七 he <dW> v/i 七 a” id w d>oupo 於 . 



Inside we’ve go*t an image o-f -tlic doupcm, y/hidli you’ll 
-find ih the u dhap-tcvl I/s*tavbuz2/imagcs w -foldcv. 


<div id="coupon"> 

<a href="freecoffee.html" title="Click here to get your free coffee 
<img src="images/ticket.gif" alt="Starbuzz coupon ticket”> 

</a> 


</div> 

/^dl v/c'vc v/v-ap^cd iKc imay m an <a> element so 仏 a 七 usev-s ta^ dkk 
oh i\)t imaje {o be -takers *to a pajc >wiiK a doupo^ iKcy tav\ prmt 



Go ahead and add this <div> at the bottom of your “index.html” file, just 
above the footer. Because we’re going to position it, the placement in the 
HTML will only matter to browsers that don’t support positioning, and the 
coupon isn’t important enough to have at the top. 

Now let’s write the CSS to position the coupon: 


#coupon { 

position : fixed; 
top : 350px; 
left: Opx; 



WcVc settmj tou^ojrv -to 
pixels -fv-ow» i)nt bo^ lets 

Ic^-t side V * 吵七 Uf aja'urvst cdjc o-f tKc viow^ori £o 
b> speti-fy 0 pixels ^vom i)nt Ic-ft- 


Wlc r\ccd to style i\\t image arvd the Imks, too ； othcv-wisc, 
we rway have bovdevs up ow 七 he image bedduse 

it is dlidkablc. So ； let’s srt 七 he bov-dev- orv h> 

wohc ， a^d do 七 he sa^c or\ 七 he Imks. WcVc us'm^ -the same 
f\rofc\rty -fo\r bot^, so wc tar\ dombmc ilic v-ulcs m*to one. 

Rcmcmbcv wc have a rule m the CSS says b> *tu\rv\ o-f-f 
dcdov-atioh, and use a bov-dev- -to undcv-lmc links ms-tcad- ttcv-c, wcVc 
ovcv-v-idimj 七 ha 七 v-ulc -fo\r 七 he Imk m 七 lie dou^on <div> and say'm^ we 
don’t want any bov-dev- ow -the Imk. badk and look a 七七 lie origmal CSS 
i-f you v\ccd *to v-cmmdi you\rscl-f o( *tKc o*thc\r \rulcs -fo\r the I'mks. 


#coupon a, img { 
border : none 
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Putting the coupon on the page 

Add the new coupon rules to your “starbuzz.css” file, 
save, and then reload the page. You may need to make 
the browser smaller to be able to see that the coupon 
stays put even when you scroll. Clicking on the coupon 
should take you to the “freecoffee.html” page. 


You know, this looks great, but it might just be even more 
snazzy if the coupon was offset to the left, so it looks like 
it’s coming out of the side of the viewport. Now, we could 
get into our photo editing software and cut off the left 
side of the image to create that effect. Or we could just 
use a negative offset so that the left side of the image is 
positioned to the left of the edge of the viewport. That’s 
right, jo^ can do that. 



Using a negative left property value 

Specify a negative property value just like you do a positive one: 
just put a minus sign in front. Like this: 
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test drive and comparison 


I rs ^ 


A rather positive, 
negative test drive 

Make sure you’ve put in the negative left property 
value, save, and reload the page. Doesn’t that look 
slick? Congrats, you’ve just achieved your first CSS 
special effect. Watch out, George Lucas! 


Just member, usrno^ UtA 
oos^o^ ^ 6 ° vc,r u? 




C ft O fUt ： ///chapttfll/sUr1>uz2/ind«x.himl 


Sfarfouzz 

CJCofftt 


BEVERAGES 

Moum 1 Mmd, $t.4V 

MorJiji Cafp I^ttc, 

C^ppumno, $i.8y 

CSiaiTon, $1.85 

F.UXIRS 

Wc proudly sent cllxln 
nur at 

■ ■ ■ —— - ■ ■ ' » V 

omi ^ 

Flll'l' 二 

COl'FKK ^ 


Cnnbmy AntioxkUnt 
BImU $2.99 

Qui Chiller, $2.99 

Hack Brain Brow, $2.99 



QUALITY COFF 


r CAFFEINE 


Hav*« 

bat we' 


: Urban Co 
ds through 

» 廉 ffrrat ai 

we're the o 


EE, QUAU IT i 

Coffet. we arc dedicated to filliostll your caffeine 
ur quality ooffres and tnu. Suit, wt want you to 
cup of ooff«« And a coqwrirnce 基《 

; only company that actively monitors and optimize ， 
caffeine levels. So stop by and (iU your cup, or order online with 
our iwrw Dcjin Mftchlnr online order form, and Rfi thAt quality 
Starbiuz ooffee that you know v 

guys doiogaQ the wonderful research at thttCAlfci.K Bus. If you 
want the Uteft on ooffee and other caffeine products, stop by and 
pay ihrm • visit. 

OUR STORY 

"A aun •麄 plan, a coffee hran". Olcty, thAt doesn't imkr a 
pAliodromc. but it resulted in a damn good cup of ooffee. 
SUrbus's CEO i> th«t man. and you already know his pUn:a 
Slarbuzz on every corner. 


In only a few years he's executed that pUn and today you can 
nyoy Starhuzzjusl about anywhere. And. of course, thr big nei 
this y«Ar U that Slarbuxz tr4un*dup %%4th HmuI Rrrt rc^d»r« to 
create Starbus'i Web pre«cxioe, whidiia growing rapidly And 
bdpins to meet tbc caffeine needs of a wfcolc new set of 
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WeVe tot A 
SUrbu 


uzz. indt 


vtnetyofeaff 
idudincour I!* 

.and 篡 f«voriti 


caffciAAtcd beverAXM to choose from At 

iJcivl, Mochi Csfc L^ttc r 
rite of our customers, Cliai Tea. 


We also offer • variety of ooffee %«ivolcor ground, for you 
to lake home with you. Order your ooffee today using our online 
Bran M*chitw ( and take the StArbuzz Coffee experience home. 


...providing all the caffeine 
you need to power your 
life, just drink it. 






OKDKRONIJNK with the! 


FACT 

FRESH 


Why wait? You can order all our fine 
coffees rinht from the Internet with our 
new, automated Bean NUchioc. I low 
docs it work? Just dick on the Bean 
Mai^iinr link, enter your order, and 
behind the socnei, your coffMit 


and 


ittd. ground (if you ¥ 
shipped to yoar dooi 


wint), packas^i. 




Can you believe how good this 
site looks? I mean, look at where 
it started compared to now. Okay, 
but we've still got our work cut out 
for us. I've got big ideas...I want to 
start a blog, and we need to build 
the Bean Machine! 


< 

IL^I 

+ 

••’ filc:///chaptcrl/starbuzz/indcx.html 


Starbuzz Coffee Beverages 

House Blend ， $1.49 

A smuoih，mild blend uf coffees fium Mexico, Bulivid and Guaicriiala. 

Mocha Cafe Latte, $2J5 

Espresso, steamed milk and chocolate syrup. 

Cappuccino, $1.89 

A mixture of espresso, steamed milk and foam. 

Chai Tea, $1^5 

A spicy drink made with black tea, spices, milk and honey. 
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ltuy« 60iacafl (be «oadevfol research a! Ike Caffnrir j>o« 

wsai tbr Utest on coffee aad other afTeine prodocU. stopb)- and 


ONK 
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new. autoaulcd Bean M«diinc. How 
< 5 ocaM«Nxl£ 7 Jwtdkdcoathr & 
Mjdsinc liak. enter yoar order. 1 
behind Ibr aoraM. your ooffc*ia 
routed. gro«nd (tfyovwantXpi 
«ad ituppedto yoar door 


W« abo offer « wic 4 jr of a 
to uke Ihoine witkyou. Oi ' 

hrM Mmchtstt, and UVr ll 


WOWl lAA^a 七 a d\(fcrcue! 
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Sharpen your pencil 


Time to put all this knowledge about floating and absolute positioning 
to the test! Take a look at the web page below. There are four elements 
with an id. Your job is to correctly match each of these elements with 
the CSS rules on the right, and fill in the correct id selector for each 
one. Check your answers at the end of the chapter. 


eeo Untitled 

I 4 ■ + 麵只 


div id=“header” 


div id=“main” 


img id=“photo” p 




div id=“navigation” 


p-,11 m sclcdWs -to 

6o—e"be the C^- 



margin-top : 14 Opx; 

margin-left: 20px; 
width : 500px; 


position 
top : 
left: 
width : 


absolute; 
20px; 
550px; 
200px; 


float: left; 


position 
top : 
left: 
width : 
height : 


absolute; 
2 Opx; 
20px; 
500px; 
lOOpx; 


you are here ► 
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more questions about positioning 


tJiereiare no ^ 

Dumb Questi9ns 


The fixed coupon is cool, but 
kind of annoying. Is there another 
way we could position it so it doesn’t 
overlap content, say at the bottom of the 
Beverages column? 

Sure. You could position the coupon at 
the bottom of the Beverages column using 
something called relative positioning. We 
didn’t cover this kind of positioning, but it's 
similar to absolute except that the element 
is left in the flow of the page (where it 
would normally be), and then shifted by 
the amount you specify. You can shift the 
element using top, left, bottom, or right, just 
like with absolutely positioned elements. 

So, let’s say you wanted the coupon below 
the drinks in the Beverages column: you’d 
move the coupon so it’s nested in the 
“drinks” <div> at the bottom, and then set the 
position property to relative. After that, it’s 
up to you to put the coupon precisely where 
you want it; you could position it 20px below 
the drinks with top: 20px, and hanging off 
the left side of the page with left: -90px (just 
like we did with fixed). 

So the four kinds of positioning are 
static, absolute, fixed, and relative? 

That’s right. Static is what you get by 
default if you don’t specify any positioning. It 
leaves everything to flow as normal into the 
page. Absolute takes an element completely 
out of the flow of the page and allows you to 
position it at an absolute position relative to 
the closest positioned parent element (which 
is <html> unless you specify one yourself); 
fixed positions an element at a specific, fixed 
position relative to the browser window; 
and relative positions an element relative 
to its containing element by leaving it in the 
normal flow, and then shifting it over by an 
amount you specify. 


You can also use these positioning 
techniques together. For instance, 
remember how we said the absolutely 
positioned elements are positioned relative 
to the closest positioned parent? You could 
absolutely position a <div> within another 
<div> by positioning the outer <div> with 
relative (leaving it in the flow), and then 
positioning the inner <div> with absolute, 
allowing you to position it relative to the 
parent <div>. 

As you can see, there is a huge variety in 
the ways you can position elements with 
CSS positioning. 

Could you position an element 
completely off screen if you wanted? 

Yes! For instance, the coupon image is 
283 pixels wide, so if you set the left position 
to -283px, the coupon would disappear. It’s 
still there on the page; it’s just not visible in 
the viewport. Remember, the viewport is the 
visible area of the page. 

What if we want to animate 
elements, like if we wanted to show the 
coupon sliding into the page from the 
left? Is that possible with CSS? 

Actually, it is, and we’re glad you 
asked. It’s beyond the scope of this book 
to get into CSS animation, but CSS3 
introduced basic animation for elements with 
the transform and transition features, which 
is exciting for us web geeks. It's fairly limited, 
but you can do some pretty cool things with 
CSS animation. If you want more than what 
you can do with CSS, you’ll have to use 
JavaScript, and that’s a whole other topic. 

We give you a brief introduction to CSS 
transforms and transitions in the appendix 
just to whet your appetite. 
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BULLET POINTS - 

■ Browsers place elements in a page using flow. 

■ Block elements flow from the top down, with a linebreak 
between elements. By default, each block element takes 
up the entire width of the browser window. 

■ Inline elements flow inside a block element from the top 
left to the bottom right. If more than one line is needed, 
the browser creates a new line, and expands the 
containing block element vertically to contain the inline 
elements. 

■ The top and bottom adjacent margins of two block 
elements in the normal page flow collapse to the size of 
the larger margin, or to the size of one margin if they are 
the same size. 

■ Floated elements are taken out of the normal flow and 
placed to the left or right. 

■ Floated elements sit on top of block elements and don’t 
affect their flow. However, the inline content respects the 
boundaries of a floated element and flows around it. 

■ The clear property is used to specify that no floated 
elements can be on the left or right (or both) of a block 
element. A block element with clear set will move down 
until it is free of the block element on its side. 

■ A floated element must have a specific width set to a 
value other than auto. 

■ A liquid layout is one in which the content of the page 
expands to fit the page when you expand the browser 
window. 

■ A frozen layout is one in which the width of the content 
is fixed, and it doesn’t expand or shrink with the browser 
window. This has the advantage of providing you more 
control over your design, but at the cost of not using the 
browser width as efficiently. 

■ Ajello layout is one in which the content width is fixed, 
but the margins expand and shrink with the browser 
window. Ajello layout usually places the content in the 
center of the page. This has the same advantages as 
the frozen layout, but is often more attractive. 


There are four values the position property can be set 
to: static, absolute, fixed, and relative. 

Static positioning is the default, and places an element 
in the normal flow of the page. 

Absolute positioning lets you place elements anywhere 
in the page. By default, absolutely positioned elements 
are placed relative to the sides of the page. 

If an absolutely positioned element is nested within 
another positioned element, then its position is relative 
to the containing element that is positioned. 

The properties top, right, bottom, and left are used 
to position elements for absolute, fixed, and relative 
positioning. 

Absolutely positioned elements can be layered on top of 
one another using the z-index property. A larger z-index 
value indicates it is higher in the stack (closer to you on 
the screen). 

Fixed-position elements are always positioned relative 
to the browser window and do not move when the page 
is scrolled. Other content in the page scrolls underneath 
these elements. 

Relatively positioned elements are first flowed into 
the page as normal, and then offset by the specified 
amount, leaving empty the space where they would 
normally sit. 

With relative positioning, left, right, top, and bottom refer 
to the amount of offset from the element’s position in the 
normal flow. 

CSS table display allows you to lay out your elements in 
a table-like layout. 

To create a CSS table display, use a block element 
for the table, block elements for the rows, and block 
elements for the cells. Typically, these will be <div> 
elements. 

Table display is a good layout strategy for multicolumn 
layouts where even columns of content are needed. 
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test your skills 



HTMLcposs 

This has been a turbo-charged chapter, with lots to learn. Help it all sink in by doing 
this crossword. All the answers come from the chapter. 



Across 

4. State between liquid and frozen. 

6. Method browser uses to position static elements on the 
page. 

7. This kind of offset was used on the coupon for a special 
effect. 

10. Usually used to identify an element that is going to be 
positioned. 

11. When boxes are placed on top of each other, these 
collapse. 

12. When you place two inline elements next to each other, 

their margins don’t_. 

15. Absolute positioning is relative to the positioned 
_block. 

16. Inline elements are flowed from the top_. 

17. A positioning type that keeps elements in the flow. 


Down 

1. Special inline elements that get grouped together into 
boxes as the page is laid out. 

2. Use_to create space between cells in a 

table display. 

3. Block elements are flowed top to_. 

5. Type of positioning that is relative to the viewport. 

6. Removes element from the flow, and sets it to one side. 

8. In general,_is a better technique for column 

layouts. 

9. Another name for the browser window. 

12. Property used to fix footer overlap problems. 

13. Inline content flows around_elements. 

14. Property that describes the layering behavior of 
positioned elements. 


538 Chapter 11 
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Hcvc^ youv- Flo>w 
blodk clcmCir\*U m 
kl |oUir\jc ivti^| W KCV-C- 




L ) 


div 

. J ， 


h 7 \ 


L J 

[p ——--q 

/ 

L ) 


[p ^ ---- 、 

y 

L ) 


h2 」 


L ) 


ul —1 


div 

^ - J 



盧 BE .Bi 看猶釦 

齡 Open your “lounge .lrfinl” file and locate 
_ _ all the block elements. Flow each one 
' on to the pa^e below. Just concentrate 
i v ' ^ on the block elements 

nested directly inside 
the body element. You 
can also ignore the “floaf’ 
property in your CSS 
because you still don't feow it 

does. Here’s the solution. 





EadK blodk element 

\Y\ yoUV 

-file is -flov/cd 
-fv-om {py bo bottom 
v/rtli a Imcbvcak m 
bc*t>wccn. 


div 


h2 


h3 


P 


h3 


P 


P 


h3 


P 


A\ 


V 

£omC o-f *tKcsc clcmcr\*ts 
/ Kave nested blodk 
\L clcmCh*U m like 

<ul>, iKc dixivs <div>, and 
■tKc -footev- <div>. 


\Nt didy /七 ask you J 

^ but i-f you ^ 
v / ⑶七 *tKc CX>*tv"3 
mile ； iwe’s Kov/ 
iKc clcmc^is *m 
*tKc cli%iv*s <div> 
yt -flowed- 






J 


\ 


\ 
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exercise solutions 




§oiuiio 


H 


Move the elixirs <div> back to its original 
place below the main recommendations, 
then save and reload the page. Where 
does the element get floated now? 

You should see the elixirs below the 
main content and beside the music 
recommendations and the footer. 


TKc <div> is -flo3*tcd 
kfi vijKt just 
bclo>M m3*m 

vcrnamdcv- o-f 
HTML *.S -floated 
av-ound i*t (v/KidK is 
musid VCdommChddtiOhS 
a^d tKc -fooiev). 



%|harpen your pencil 
彎 、 Solution 


What we want to do is set a right margin on the main content section so that 
it’s the same width as the sidebar. But how big is the sidebar? Well, we hope 
you aren’t already rusty since the last chapter. Here’s all the information you 
need to compute the width of the sidebar. And here’s the solution. 


#sidebar { 

background : 
font-size : 
padding : 
margin : 
width : 
float: 


#efe5d0 url(images/background.gif) bottom right; 
105%; 

15px; 

Opx lOpx lOpx lOpx; 

280px; 
right; 
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彡 

w s.r?^- 

+ 

^2.£r?i*r 

+ 

o v?-gocl--pll-r 

+ 

o 

+ 

o 

+ 

15.rpp 2 -i-r 


15 .rpps--p^ 
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每拥 ct 鉍 

QpLvilOH 


The Starbuzz CEO has decided to add a drinks menu 
column to the Starbuzz Coffee web page. He wants 
the new column to go on the left side, and be 20% of 
the width of the browser window. Your job is to add the 
new HTML to the existing page in the correct position, 
and then finish up the CSS below to make sure it 
displays as a table cell, like the other two columns do. 
Here's our solution. 


Wc added tKc I+T/V1L mside the 

'-tablcRow' <div> ; above “maih" 
<div> so tlic doh-tcht Hornes -fivst a^d 
IS -fiv-s-t dolumh \y\ *tKc page (ahd 
七 he -fivst tell m ilic table layout). 



BEVERAGES 

»*omw BUnd, 

>| o«^CilrUoe. 

$a.s 5 

Uppoodaot 81.89 
C3ialT«t.$i.ii5 

CUX1RS 

proudly jcnr 
d Wn brtvxdbyour 
tnh«HMd 
HntLconjx 

Tot Cooter, 

R**pfccnyl« 
Caneanna^e, $ 399 

Wurfxnyaij, Uixir. 

Crtnberry 
Aodoxid«nc Buc 

奴 go 

auiailumw 

Bnnr, 



<div id="tableContainer n > 

<div id="tableRow"> 

<div id="drinks"> 
<hl>BEVERAGES</hl> 

<p>House Blend, $1.49</p> 
<p>Mocha Cafe Latte, $2.35</p> 
<p>Cappuccino, $1.89</p> 
<p>Chai Tea, $1.85</p> 
<hl>ELIXIRS</hl> 

<P> 


QUA,J1Y QUAIJTV caffeine 

OURSTORY 

麵璧魔 

starbuzz coffee beverages 





ORDER ONUXE with the SEJLS 
machink 


«) YOUR DOOR 

WV«i»?Vou« aoril#rdI<>ur 
fine coffo«h«bT from the Internet 

也 ck on Om? Bc.m XUdiinr l.-^r 

«^yourortlri.«nd behind ihc 
coffee ia routed. 



ttcvc^s Koy/ CB-0 y/ah*b iKc 

S-tairbuzz. fage -to look y/iih 
"the hC>w dolumh or\ *tlic lc-P*t 
亡 oivtammg ilic dvihks me^u. 


We proudly serve elixirs brewed by our friends 
at the Head First Lounge. 

</p> 

<p>Green Tea Cooler, $2.99</p> 

<p>Raspberry Ice Concentration, $2.99</p> 
<p>Blueberry Bliss Elixir, $2.99</p> 
<p>Cranberry Antioxidant Blast, $2.99</p> 
<p>Chai Chiller, $2.99</p> 

<p>Black Brain Brew, $2.99</p> 

</div> 


<div id="main M > 


丁 ^ _ CS£...” “ 

#drinks { 

display: iable-dell ； 
background-color: #efe5d0; 
width : 20%; 




jet *tKc dvihks <div> -to display 
as *tlic -fiv-st dolumh *m y/e 

srt 七 lie display -to -bblc-^cll. 


padding : 15px; 
vertical-align: top; 
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exercise solutions 

— ^harpen your pencil_ 

Time to put all this knowledge about floating and positioning to the 
test! Take a look at the web page below. There are four elements with 
an id. Your job was to correctly match each of those elements with the 
CSS rules on the right, and fill in the correct id selector for each one. 
Here’s the solution. Did you get them all correct? 



Untitled 


div id=“header ， 


div id=“main ， 


img id=“photo” 

P 




div id=“navigation’ 


p-,11 m sticks -to 
"bV^C 



养 mam 

{ 

margin-top : 140px 

margin-left: 20px; 

width : 

} 

500px 


... { 

position : 

absolute 

top : 

20px; 

left : 

550px; 

width : 

} 

200px; 

养 pho*to 

... { 


float: left; 


^header 


position : absolute; 

top : 20px; 

left : 20px; 

width : 500px; 

height : 10Opx; 
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RCI 鉍 
PLuiiOH 


This CSS is so easy you could probably do it in your sleep, after all the layout experience you’ve 
had in this chapter already. Go ahead and write the CSS to fix the images in the header. You 
know you’re going to use float; fill in the blanks below with the rest of the rule you need to get 
the images into the right place. Here’s our solution. 


养 header im^hcadcv-Slogah ^ 


float: 




^ ou ld also jus-t use ^Kcadc\r£lojah 
Kc\rc as iKc scIc^W y ou 



HTMLcross Solution 
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exercise solutions 


Given what you know about CSS table displays, sketch out how our two 
columns from the Starbuzz page would fit into a table. Check the answer 
at the end of the chapter before moving on... 



S-tairbuzi pajc as iKc dells. 


^Jharpen your pencil 

Solution 
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12 kml5 markup 


Were the first 
on the block to move up to 
HTML5...the salesman told us 
it was more refined and shinier 


Modern HTML 




So, we’re sure you’ve heard the hype around HTML5. And, 

given how far along you are in this book, you’re probably wondering if you made the 
right purchase. Now, one thing to be clear about, up front, is that everything you’ve 
learned in this book has been HTML, and more specifically has met the HTML5 
standard. But there are some new aspects of HTML markup that were added with 
the HTML5 standard that we haven’t covered yet, and that’s what we’re going to do 
in this chapter. Most of these additions are evolutionary, and you’re going to find you 
are quite comfortable with them given all the hard work you’ve already done in this 
book. There’s some revolutionary stuff too (like video), and we’ll talk about that in this 
chapter as well. So, let’s dive in and take a look at these new additions! 
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thinking about html structure 


Rethinking HTML structure 

Before we learn even more markup, let’s step back for a second.. .we’ve talked a 
lot about structure, but are <div>s really good structure? After all, the browser 
doesn’t really know your <div id= n footer"> is a footer, it just knows it is a 
<div>, right? That seems rather unsatisfying, doesn’t it? 

Much of the new HTML5 markup is aimed at recognizing how people 
structure their pages with <div>s and providing markup that is more 
specific, and better suited for certain kinds of structure. You see, when the 
browser (or search engines, or screen readers) see id= M navigation" in your 
page, they have no idea your <div> is for navigation. It might as well say 
id= M goobledygoop". 


So, the standards bodies actually took a look at how <div> elements were 
being used — for headers, navigation, footers, articles, and so on — and they 
added new elements to represent those things. That means with HTML5 we 
can rework our pages a bit and replace our <div>s with elements that more 
specifically identify the kind of content contained in them. 





Think about the way you’ve seen <div>s used. Also, check out a few web pages 
and see how they are using <div>s. Let’s say you wanted to take the most 
common patterns and change the <div>s into real HTML elements. For instance, 
you could change all the <div id="footer"> elements to just <footer> elements. 
Make a list of all the new elements you’d add to HTML. Of course, you won’t 
want to add too many, just enough to cover the most common uses. Also note 
any advantages (or disadvantages) of adding these new elements: 
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html5 markup 








Sure, we could just tell you about the new HTML5 elements, but wouldn’t it be more fun to figure 
them out? Below, you'll find the new elements to the left (these aren't all the new elements, but 
you'll find the more important ones here); for each element, match it with its description to the right: 


<article> 


<nav> 



<aside> 


<section> 


<video> 


Con contain a d^te or time or both ， 

Contains content meant for naVlgcttlon 

links in ihe page. 

Used t9 add Video media t9 J/QUT page 

Content th^tt goes £tt the bottom 9 ? the 
page, or tlie bottom a section O? tlie 

p 參 

Contains content thctt is supplemental tQ 
tKe page content, like a callout QX sidebar. 

Content that goes stt the t9p 9? the page, 

or tlie t9p 9? a section O? tlie page. 

AtKemcttic grouping content, ^typically 

With a Reader and possibly a footer. 

Represents a sel?-contci!necl composition in 
a page, like a blog post, user fcmni post, 
or newspaper article. 
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reviewing the starbuzz page 


Modern Starbuzz 

Starbuzz Coffee is a modern, hip company, so shouldn’t they be using 
the latest and greatest markup in their pages? Let’s take a look at 
where they might be missing out on opportunities to use HTML5: 


f[r\d 七 lie mam 
doirrtch 七 avea is 
made up a sc 七 
o(, well, almost 
avtidlcs about 
vavious aspcd*ts o-f 
£*tavbuz2- 


^ Could .e use a 

^ Le to 如 如如 

Stav-buz^ uses a <div> ^ w > uS ’ use a <div> 4 

■d 二 header Wttc Keadmg. ⑽ ••仁 俗忪 

md'm ； derrtev dolumn- 


Hfo 


Starbuzz Coffee 


j © filp7//rhaptprl?/sfarhiJ77/ir 


ipx.html 


tteve’s a <div> with 
Br\ id— w dv-'mks w -fov 

七 his lc*f 七 dolumn. 

r 

This doivtcivt is all 
irelated; is ilicvc a 
bciicv way? 


^farfeuzz 

7 Qofftt 


RFVF,RAGRS 

House Blend, S1.49 

Mocha Cafe Latte, 

3235 

Cappuccino, si.89 
Chai Tea, $1.85 

ELIXIRS 

We proudly serve elixirs 
browod by our friends at 
the Head First Lounge. 

Green Tea Cooler ， $2.99 

Raspberry Ice 
Concentration, $2.99 

Blueberry I 5 liss hlixir. 

rranhwiry Antioxidant 
Blast, $2.99 

Chai Chiller, $2.99 

Black Brain Drew ， S2.99 




QUALITY COFFEE, QUALITY CAFFEINE 


Al Slarbu^ Coffcu, y 


: dedicated I。 filliiiKttU your 


,wu 

caffeine needs through our quality coffees and teas. Sure, 
want you to have a great cup of coffee and a great coffee 
experience as well, but we're the only company that actively 
monitors and optimizes caffeine levels. So stop by and fUl 
your cup, or order online with our new Bean Machine online 
order form, and get that quality Starbuzz coffee that you 
know will moot your caffeine standards. 


i mention caffeine? We've just started funding the 
all the wonderful research at the Caffeine Buzz. If 



And, did 

guys doing aU the wonderful research at the 
you want the latent on coffee and other caffeine products, 
stop by and pay them a visit. 

OUR STORY 

*'A man, a plan, a coffee bean". Okay, that doesn't make a 
palindrome, but it resulted in a damn good cup of coffee. 
Starbuzz's CEO is that man, and you already know his plan: a 
Starbuzz on cvciy corner. 

In only a few years he's executed that plan and today you can 

enjoy Slarbuzz ju5l dbuut anywhere. And, of ihu big 

news this year is that Starbuzz teamed up with Head First 
readers to create Starbuzz’s Web presence, which is growing 
rapidly and helping to meet the caffeine needs of a vAolc new 
set of customers. 

STARBUZZ COFFEE BEVERAGES 

Wc'vu K^ta variety uf caffuiaalud bcvcntKcs to diuubv fruui at 
Starbuzz, including our I louse Dlend, Mocha Cafe Latte, 
Cappuccino, and a favorite of our customers, Chai Tea- 

Wo. fllsn nffpra varipty of mfioo hpjms, wholfi or ground, for 
you to take home with you. Order your coffee today using our 
online Bean Machine, and take the Starbuzz Coffee 
uxpcrieuo; liume. 


Why wait? You can order all our fine 
rnffwy; right from th^ lntnm(*t with 
mir now, antnmAt^d Rojin Marhinp. 
IIow docs it work? Just dick on the 
Bean Machine link, enter your order, 
aud behind llic ^cciicb, your uuffuu in 
roasted, ground (if you want), 
packaged, and shipped to your door. 





We dan dc-f'mitcly 

o( 七 ha 七 as 七 he main 

dor\*tcn*t av-ca o-f 
page ； ov maybe y/c should 
say> a main sedfcon- 


ttcvc^s a <div> y/i-th an 
>d— w sidcbav w -fov -tlic 
vigil 七 dolumn. 


This vcally -feds like 

tdiY\ -this be an aside oy\ 
ilic fage? 

Oy\C ho*tc ： -fov -tliis 
乙 hapteir, y/e’ve \rcmovcd 
七 he av/avd a^d tlic 
dou^on so we dan -fodus 
or\ the big - pidtuve 
stvud-tuvc. 


ttcvc ； s a <div> Wlih id— w -footcv w 
-fov- ilic -foo-tev. Tliat one seems 
pretty obvious s'mdc we have a 
-foo-tev element. 
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html5 markup 




Using everything you know so far about the new HTML5 elements, see if you can 
rework the Starbuzz page to make use of them. Go ahead and just mark out and 
scribble on this page. 



f 

<div id=“header”> 


<div id=“d 「 inks”> 


<div id=“main”> 

<div id-'sidebar> ~| ' 


<div id=“footer”> 


^ sKoy/'mj suj>cv-dic*t3ilcd s-tv-udtuvc page ； 

so -fov irtoy/ jus-t -rodus on lav-gc-gva'mcdi s*brud*tu\r«. 
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playing with html5 



Using everything you know so far about the new HTML5 elements, see if you can 
rework the Starbuzz page to make use of them. Go ahead and just mark out and 
scribble on this page. 


iVe use the <hcadc\r> -fov ouv- 

<div>; ihats fvciiy stv-ai 


<header> 





tdv\ use <-foo-tcv> 
-fov ouv -foctev*. 
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html5 markup 


Update your Starbuzz HTML 


Let’s go ahead and add these new elements to your Starbuzz HTML, starting with the 〈 header 〉， 
<footer>, and <aside> elements. We’ll come back and look at the <section> element in a bit, but 
for now you can just leave the drinks and main content <div>s as they are. Go ahead and open up the 
Starbuzz “index.html” file and make the following changes: 


o Add the <hcadcr> element 

Start by replacing the <div id="header "> with a <header> element. Like this: 


<div 


1 header M > 


Remove -the <div> tags 
them y/i-th <licadcv*> -tags. 


<header> 

<img id= M headerLogo' 

src="images/headerLogo.gif" alt="Starbuzz Coffee 


logo image"> 


<img id="headerslogan" 

src="images/headerSlogan.gif" alt= n Providing all the..."> 
</header> 

</div> 


❺ Add the〈footer〉element 

Do the same for the <div id= n footer ">, only replace it with a <footer> element: 

<div id= n foot e r n > 

<footer> 

&copy; 2012, Starbuzz Coffee 
<br> 

All trademarks and registered trademarks appearing on 
this site are the property of their respective owners. 

</footer> 

</div> 

❺ Change the sidebar to an〈aside〉 

Now let’s change the “sidebar” <div> to an <aside> element: 

<div id = n sid e bar n > 

<aside> 

<p class="beanheading n > 

<img src= M images/bag.gif" alt= n Bean Machine bag n > 

<_ _版 decided -to save a -few tvccs (ov- bits) by abbveviaii^ i\\t 

a little ； just make su\rc you keep all the ovigmal dontent m 
fage and ilic <div> -tags h> <asidc> -tags. 


</p> 

<p> 

</p> 

</aside> 

</div> 
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test driving sections and aside 


Test drivmg the wcw ride 琢 


A 


fH#7//chiw«rl2/surbuM/,fvi «： 


hrml 


We’ve got a bit more to rework, but doesn’t your 
HTML already feel somehow newer, cleaner, more 
modern? Go ahead and do a test drive by loading 
your page in your browser. 


UK oK...looks like 

七 iVmjs did〆 七 

y/ovk so well. 


beverages 

HouMDUndL 
Moch* cate Uoc. 

Ca^wodno. $1.99 
Oml T\s», 

elixirs 

proudly save 
bewod by our 
at the Had 

Hr« 

Orwil 
H 99 


CoooentFitSoQ, $ 2.99 

tflttcbcrry MU* felUir. 

82.99 

Qranhony Antioxidant 
HU*t $2.99 

Qui Chiller, $2.99 

S 麄 dc Bnin Brtw. 


J3, Suihnn Cnffo* 

1 tn^orurtc* tnd rcciitcred 


冬 ; 



QUALTIY coffee, qualitv caffeine 

OUR ffTORY _ 

ippsssss^ Ssr 

otarbuzz coffee beverages 

、 apjMJcnnu. and B fa^ntc of our cust 0 ’— 


◦KOKR OXLIKEHritJi th e 

MACHINE 


mattmi, 

tod 


Corner*, C 


WcalaoofferA 

you totak» hoi 
our onliiM Rr^nMArli 
c^P^icooc home 


m M^h.rw, andUd«thf StorbuaCoff^ 


tndcnurfcia 


c ^°9vrso1 thdr owner*. 


What happened? You had 
me all talked into this 
HTML5 stuff. That page 
doesn’t look so good. 



No worries; we just got ahead of ourselves. The 
page doesn’t look right because we changed the 
HTML, but we never reworked the CSS. Think 
about it like this: we had a bunch of <div>s 
with ids that the CSS was relying on and some 
of those <div>s aren’t there anymore. So, we 
need to rewrite the CSS to target the new 
elements instead of those old <div>s. Let’s do 
that now. 
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html5 markup 


Peforc you continue... 



Watch it! 


°* der browsers do not support 
the new elements in HTML5 
you’ll be using in this chapter. 

: lTn ： s^ tseTr 

^:: 二 ====: TolfyouT" 

口 _ ence target is mob " e _ 

you’re good 
㈣ ew %2 0elements 

chapter. 


browser support of the elements in this 
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styling the new elements 


How to update your CSS for the new elements 


Let’s update the CSS to reflect our new elements. Don’t worry; we’ve already got all 
the basics correct in the CSS file. All we need to do is change the selectors a bit: 


body { 

background-color : #b5a7 8 9; 

font-family : Georgia , "Times New Roman ”， Times, serif; 

font-size : small; 


margin : Opx; 

} 

#header^f 

header { 

background-color : #675c47; 
margin : lOpx lOpx Opx 1Opx; 
height : 108px; 



Pivs 七 , vemove 七 lie 养 mav-k -fv-om 七 lie Kcadcv vulcs. 
WicVc 30 •… 3 -fyom B <div> wi 七 an id o*f 

*to an named iicddcv. 



#header img#header01ogan { 

header img#headerSlogan { 


float: right; 




some tv'CCS.-just 
vest of CSS Kcvc. 


# sidebar{■ 

aside { 
display : 
background : 
font-size : 


/ — Hcvc >wc need *bo dKangc 七 iiis -fv-om -tavjctmg an 

element witK an id o-f w sidcbav w *to aside dement 

table-cell; 

#efe5d0 url(images/background.gif) bottom right; 
105%; 


padding : 
vertical-align : 



background-color : 
color : 


15px; 

top; 


^ — Pmally> wc to 

sclcdt tKc *foo 七 cv 
#675c47; clcmcn*t- 
#efe5d0; 


text-align : center; 

padding : 15px; 

margin : Opx lOpx lOpx 1Opx; 
font-size : 90%; 


Test drive 


. bettev. 


All right, that’s all we need to do; let’s give it another try, and this 
time you should see the page is back to normal. In fact, it should 
look exactly like it did before we add the HTML5 markup. 




O H 


1 ^ ： /f/chi 


咖 . 咖 , 


Averages 

㈡ 一机 

^Ppoodno. Sj.8y 
$i. 9 a 

EUXIHs 


ts.99 


Cooo «»»iloo, 打效 

^t myau,aMr - 

^CbiDtr.s^yg 

? ■决她 iJrtw. 


STORY 


卿 _LW Ewitku>e , 

*^chjsh 

PAST 

HUSH 

710 V«7 R door 

，警 P? 


Jttai 


554 Chapter 12 

















html5 markup 





What’s the point of adding the new HTML5 markup if it has no visual effect on the page? 


Fireside Chats 



Tonight’s talk: HTML5 and HTML4.01 mix it up 


HTML5 

Ah, my old pal, HTML4.01. You had a good run, 
but now I’m here. 

I’m just getting started. 


Sure, people are beginning to use them. Remember, 
they aren’t going to change the world, they just 
make explicit what web developers have been doing 
all along. 

I’m thinking more about <div> here". 


I’m not talking about getting rid of <div>. Yeah, 
he’s great for grouping content together for styling 
and stuff, but what if you want to, say, identify 
some content as an article on your page? Or break 
your page into sections? 


HTML4.01 


A good run? Take a look at the Web; it is still a sea 
of HTML4.01. 

Yeah? And how are those new elements going? I 
haven’t seen many of them out there. 


How is <p> not explicit? Hello? That’s a paragraph. 
Can’t get more explicit than that. 

There’s nothing wrong with <div>. Leave him 
alone. 


You know as well as I do that everyone is confused 
about how to use those elements, and you can do 
both those things with a <div>. 
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discussing html versions 


HTML5 

Yes, you can do it with a <div>, but with, say, an 
<article> element, the browser, search engines, 
screen readers, and your fellow web developers all 
know for sure that’s an article. 


Remember, we use the right element for the job, 
right? That way we can communicate the most 
explict structure we can, and all our tools can do 
the right thing. 


See, that is just exactly where you are wrong. Take 
the <aside> element, which is for marking up 
supplementary content on a page. Now on a 
mobile phone with limited screen space, if the 
browser knows that content is an <aside>, you 
might see that content pushed to the bottom so that 
you see more important content first. If the content 
is in <div> instead, then any number of things can 
happen depending on where in the HTML file the 
content is. 


HTML4.01 


So? It still looks the same. 


Right thing? Like what? Display it exactly the 
same? 


I still don’t see what the big deal is. 


Now the browser can know the difference between 
the main content in the page and an <aside>. So 
it can treat the content in the <aside> differently. 
For instance, a search engine might prioritize the 
main content in the page over the content in an 
<aside>. 


Great, so with HTML5 we know how to deal with 
asides. 


No, no, this applies to all the new HTML marl 
header, footer, sections, articles, time, and so on. 


CKNSOllEl) 


Well, I think it is about time you take that footer of 


vonrs and stuff it 


CliNS 


CENSOKli：]) 
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tcto ^ oui < ^ 
v-cdo o-f Aa 七〒 






html5 markup 


^harpen your pencil 


"The ttT/WL wi*tliou*t *thc 
<sc^*tioh> 




<div id= n tableContainer n > 
<div id= n tableRow"> 
<div id="drinks"> 


You’ve already replaced the "header”, "footer”, and "sidebar” 

<div>s with the <header>, <footer>, and <aside> elements. Now 
you need to replace the "drinks” and "main” <div>s with <section> 
elements and also update your CSS. Leave all the table-display 
<div>s in place for now; we still need those to keep the page laid 
out correctly. 




6\o aKedd sdva*tdK out HTML* and 
CSS below and y/vi 七 c m y/Kat you need -fov 
dddim^ tKc <scdtior\> element 


</div> 

<div id= M main n > 


</div> 

<aside> 


</aside> 

</div> <!-- tableRow --> 
</div> <!-- tableContainer --> 


Tlic Bs is how -PoV" 
#d\rir>ks ar»d #r»aih. 




#drinks { 

display : table-cell 

background-color : #efe5d0; 
width : 20%; 

padding : 15px; 

vertical-align: top; 


#main { 

display: table-cell; 

background : #efe5d0 

url(images/background.gif) top left; 
font-size : 105%; 

padding : 15px; 

vertical-align: top; 




thes y eTct^ 
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fix the style of the sections 

- i^^drpen your pencil 

Solution 


You’ve already replaced the ^header 7 ', ^footer 7 ', and "sidebar” 

<div>s with the <header>, <footer>, and <aside> elements. Now 
you need to replace the "drinks” and "main” <div>s with 〈 section 〉 
elements and also update your CSS. Leave all the table-display 
<div>s in place for now; we still need those to keep the page laid 
out correctly. 

Here’s our solution: 


"The HTA1L wi-tK -tKc 

<div id= n tableContainer M > 
<div id= n tableRow"> 
〈section id="drinks n > 


</section> 
〈section id= M main 



</section> 

<aside> 


.in"> 

■r 


All v/c A\d >/as 
<a»v>s WrtV) <scdW >s ,, 
w drmks , 

lA/ic *tKc ids iKcvc 
bedause v/e *to be 
able io uhi<\ucly idciati-fy 
eadK <scdtio^> io s-tyle it 


f mo 






■fiVElUCEfi 

lk ^aem tl49 

KUXIHS 




</aside> 

</div> <!-- tableRow --> 
</div> <!-- tableContainer --> 

TKc updated *fov 

the two sedtiohs ^ 




如如 kt , 虹势 


• 他 ti 

ivt 


on 8 T 0 RV 

麵 




section#drinks 
display : 




table-cell 
background-color : #efe5d0; 
width : 20%; 

padding : 15px; 

vertical-align: top; 


section#main 
display: 
background : 
font-size : 
padding : 


後 to ^d Kav C Ic-f-t -tKc C£S 
wdly & 4 was / Bcdausc wc a^ c 
usihj ids ； -the same -fewo dcmCK»-fes 
would Kavc bccr» iav-jeted wiiK 
exist ， mules. Wc wch-t ahead 

addcd ^ "tag hame ih 4 咖七 

o+ iKc id sclcd-tov- jus-fe io make i-t 

cleair 的 … 3 <scd-tioh>s heme- 


table-cell ; 

#efe5d0 url(images/background.gif) top left; 
105%; 

15px; 


/W We’s 七 k \>ay! Looks 
*tV\c same, bu 七 do 於七 
you (tt\ better k 灼 oW” 
you vc Jot HTML-*? 
clcwvc^ts m fladc? 


vertical-align: top; 
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html5 markup 





Wcv-c ； s y/Ka-t the f ihished 

blog page will look like. 


-- 30 七 a y\\tt yvdv'ijation 

menu bclo>N 七 he iieadd” 


*t^C r»»3ur» ton 七⑶七 
aved no>M Kds seveval bloj 
pos*U m • 七 . 


TKc vest o-f 七 lie page 
is 七 lie Sdrme- 


Hey, Tm starting a blog. Can 
we use any of these new HTML5 
elements to build it? I want to make 
sure rm using the latest and greatest 
stuff...ifs going to be super popular, just 
like our coffee. 


Interesting you should ask, because many of the 
new HTML5 elements are perfect for creating 
a blog. Before we get into the actual markup, 
though, let’s think about what a blog might look 
like, making sure we keep it consistent with the 
current Starbuzz design. To do that, we’ll create 
a new page with the same “drinks” <section> 
on the left, and the same <aside> on the right, 
and all we’ll change is the content in the middle 
to be the blog. Let’s check it out: 


providing all the caffeine 


you need to power your 
life, just drink it. 
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playing more with html5 elements 



Your job is to choose the elements you think will work the best for the new blog. Fill in the 
blanks in the diagram below to show which elements you would choose. Note that each blog 
post will have a heading and at least one paragraph of text. 

Choose your elements from the list below: 


<header> 

<footer> 

<article> 

<nav> 

<time> 


<aside> 

<section> 

<div> 

<hl> 

<P> 


TKc hew bios page. Its like tKc 
“e page, -tKc middle 

scd*tioh is how blo^ pos*ts 

wc Kavc a nxtm 、 _ 

below tKc licadev*- 
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html5 markup 



E^gciSe 

SpLytipH 


Your job is to choose the elements you think will work the best for the new blog. Fill in the 
blanks in the diagram below to show which elements you would choose. Note that each blog 
post will have a heading and at least one paragraph of text. 

Choose your elements from the list below: 


Tk mw blog page, li's like the 
home yay, tKc middle 

sc^"tior» is how blo^ pos*ts 

below tKc Keadev-. 


<header> 

<footer> 

<article> 

<nav> 

<time> 


<aside> 

<section> 

<div> 

<hl> 

<P> 


iVc used <v\av> dcmcirt 
-fov- 七 he navi^a-tion menu- 


Wc pu 七 i\\t bloj w scfrtioy\ W 
o-f i\\t yay m a <sctiioy\> 
dcmcy\i because <sc6*tio^> 
is used *to youp v-cl3*tcd 
do 灼七 ⑶七 -tojciiicv-. 

Wc put cadh blog posi \y\ 
i*ts oy/h <a\rtidlc> element 
because eddli blog post is a 
scl-f-dor\*ta'mcdi iicm (ihai 
is，you dould take av-tidlcs 
witliou 七 -tli 

v-cadability of ihc ohes you 
Ic-fi bdVmd). 
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using the article element 


Puildiwg the Starbuzz blog page 


From the previous exercise, you know that we’re using a 〈 section〉element for the blog section (in 
the middle column) and an <article> element for each blog post. Let’s get started doing that, and 
we’ll come back to navigation in a bit. We’ve already created the “blog.html” file for you by making a 
copy of the file “index.html”，and replacing the “main” <section> with a “blog” <section>. You 
can get the complete “blog.html” from the code downloads for the book; here’s part of it: 


<section id="blog M > 
<article> 



1/VcVc us” a <scdt»o«r»> clem ⑶七 ，， 

riddle toUh jusUke ⑽ U Vam m 


<hl>Starbuzz meets social media</hl> 

<P> 

Here at Starbuzz we * re embracing the social media craze. In fact, 
we 1 re going further than any of our competitors and we * re very close... 


ohly sKowihj 
y pav-t o-f ea^K blog 
fosi Kcvc- 


</p> 

<p> 

Sound like science fiction? It's not; I'm already testing our final 
prototype social network cup as 工 write this... 

</p> 

<p> 

So, keep your eyes out for this amazing new cup. And 工 'll be 
releasing a video teaser soon to tell you all about this new invention, 
straight from Starbuzz Coffee. 

</p> 

</article> 

<article> 


<hl>Starbuzz uses computer science</hl> 

<P> 

參 • • 

</p> 

</article> 

<article> 


^ - 



blog post jets iis 



ovm 


<hl>Most unique patron of the month</hl> 


<p> 

參參參 

</p> 

</article> 

</section> 


WrtWm <a\-ht\t>, >wc use <Kl > -fov 
— r iKc Kcad'mj, ar\d <p> -fov iiic pav-ajv-apKs o-f 

Pv-ciiy simple! Bui mov-c 

a \)\AY\tin o( <div>s, vijiii? 


今 e 七七 he -full blog post text -fvom 七 lie -file you 

downloaded -fvom y/idkcdlysinf»a\rt dorw. 


562 Chapter 12 






html5 markup 


Setting up the CSS for the blog page 

You might have noticed that both the “index.html” file and the “blog.html” file 
link to the same CSS file, “starbuzz.css”. Let’s take a quick look at “blog.html”: 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= n utf-8"> 



tKc lihk io tKc C££... 

- jo ahead artd 

update tlic title o-f iKc page. 


<title>Starbuzz Coffee 

- Blog</title> 

<link rel="stylesheet" 

type= n text/css n href="starbuzz.css n > 



</head> 


Now, we haven’t yet added any CSS to target our new section with an id of 
“blog”，so let’s do that now. We know we want the “blog” < section 〉 to be 
styled exactly like the “main” <section> on the home page, so we can just 
reuse the same rule by adding the rule for the blog section to the existing rule 
for the main section, like this: 



Wc use tKc same vulc U botK <sctt.on> elements by usmj 
七 he *Uo sclct-bovs sepavated by a TKis says, a^ly all 

these ^vopcv'tics bo bo*tii selected demerits. 


section#main, section#blog { 
display: table-cell; 

background : #efe5d0 url(images/background.gif) top left; 

font-size : 105%; 


padding : 15px; 

vertical-align: top; 


Will w^k b 似 u 叱 bA | mk 心忪 same 仏 


That’s it! All the other styling we need for the “blog” <section> of the page is 
already in the CSS, and we’re not adding any special styling for <article>. So 
it’s time to … 
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testing article 


« o o 


Test drive the 
blog f>age 

With the creation of a new blog 
page, and those quick tweaks 
to the page (that is, adding the 
<section> and <article> 
elements), let’s save the page 
and load it in the browser. 


/\s you tat\ Stt, like <sc 6 iioy\>, oviitlo ； 

and <asidc> hav/e a si mi lav- default style *to 
Aa 七 is, y\oi mu 乩 ! Bui do add nrvfoVmaW 
aboui i\\t 6 。灼七⑶七 m youv 


。 ^'•^^c^Apt^rlJ/iUrbuzi/bloy.html 


beverages 

Houm Blend. $2.49 

Moriui Cnfe I 钃 rtr, 82.35 

Ctppocdno. $1.89 

Qui Tea, S1.85 

ELIXIRS 

WeistHMilyKfnrriuiiRi 
Hnwnl by tmr frimeb; nt the 
Mmd F!njl I^nungK. 

CirBen Tet Cooler, *2.99 

Riisphi-rry for 
CiCincmtnHcin, 

BluebenyBtUs ElUdr. $2.99 

Hninhmy Anh'tuidnnt 
Mast, $2.99 

QuI OiUlcr. $2.99 

Muck Bniin Rn*%»-, $».yy 


53 tarhuzz aocia] media 

gliirssss- 

rnijuit" 

S^rbuzz wtes computer science 

Most unique patron of the month 




t^d tnulemarloi 義] 




Whafs the difference 
between a section and an 
article? 




OKI>KK (>\!J\K with the HK/V 
FAST 

fresh 

TO YOUR DOOR 


i machink 


wait? You can order all our fine coffees 

from the Inlrmcl with our nrw 

•utomated Bean Machine. Howdocsft^rk? 
Justdickonthc Bean Machine Unk. enter 
ynurortK-r, and iirhiml i)w Kccnrs, your 
oo^ec 1* roasted, ground (if you 仰 nt)， 
IwrfatRwl, and shipped lo>t»ur door. 


*PPe*ring oothi»*iie«retbe property oT their 



Yes, it can be confusing. We’ll tell you right up front 
that there is no crystal-clear answer to this; in fact, there are 
many ways to use <article> and <section>. But here is 
a general way to think about them: use <section> to group 
together related content, and use 〈 article 〉 to enclose a self- 
contained piece of content like a news article, a blog post, or a 
short report. 


In the Starbuzz page, each column contains related content, 
so we’ve treated each column as a section of the page. We’ve 
also taken the individual blog posts and made those articles 
because they are self-contained (you could even imagine taking 
one and reposting it on another site or blog). 

Your mileage may vary, but in general, stick to grouping 
related content together with 〈 section 〉， and for self- 
contained content, use <article>. And if you need to group 
content together that doesn’t feel as related, you always have 
<div> to fall back on. 
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html5 markup 



We still need to add a 
date to the blog... 

Did you notice in our blog design that we 
added a date to every blog post? Before 
HTML5, dates were created in an ad hoc 
way~you might have just added the date 
without marking it up at all, or used a <span> 
or even a <p> to mark it up. But now, we 
have an element that’s perfect for the job: the 
<time> element. 


Starbu^ meets soci al media 

3 / 12/2012 

re em f — 也⑽ 

- m -™^Pgtitor 5 and 

_ 趣辞驗 逆 



A fwnn 切 ufe guide fa the <fltne> ejetnenf 


Let’s take a closer look at the <time> element. It has an important 
attribute, datetime, and the element’s kind of picky about the values you 
use in this attribute, so it's worth going over some of the details. 


If you vc usihj tKc date-time a*t-tv"ibu-tc to spedi-fy 3 date 
a^d/ov a time ； tKch you dah y/\riic y/haievcv- you y/ahi as 
七 he dohichi for ihc clcmcht /VJosi ofic^, that y/ill be 

sonxC 如 te- o\T iimc-\rdalcd icy>i, like Tcbvuavy 19, 1.0W 
o^r cveh w ycsic\rday w ov- \o\n ,! . 


date/ 



TV^c da*tct«r»»c atbribu 七 e is v-c<\u'»v-cd 
•，- f to 於七⑶七 o*f 士州⑶七⑼七 
一七七 ⑶ usmj i\^t o(U\a\ I 外七价 e 七 

<time datetime= TI 2012-02 - 18 ”> 2 / 18 / 2012 < /time> 

TW.s \s ttc <^(\t\a\ 

-fov dates WitK a day, 

ycav*- 


Hcvc avc some o 七 iicv ways -bo 
c^pvcss dates and times using 
七 he o-f-fidial -fovmat- 


7 


2012-02 V^ u ^ spedi-fy just 3 year a^d moyrtii, 

ov even \us*t a ycav-. 

2012 u 

2012-02-18 09: 00 yj^ … a 如 on a 七 m 
2012-02-18 18:00 2-^-Kou\r -format- 

05:00 ^ - 匕扣 just a time- 

2012-02-18 05:00Z 


l-f you use a w ^ w a-ftev- 
tKc date sv\d time, tKcn it 
.ea,sUTCW. (uTC=i 刎丁 ) 


you are here ► 
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test driving the time element 


Adding the <timc> elcmcwt to your blog 

Edit your “blog.html” file, and add the following dates below each article heading: 


<article> 

<hl>Starbuzz meets social media</hl> 

<time datetime="2012-03-12 n >3/12/2012</time> 


Below 

ddded a <-tiw»c> element 


</article> 

<article> 

<hl>Starbuzz uses computer science</hl> 

<time datetime= '▼ 2012-03-10’▼ >3/10/20 12</time> 

• • • _ _ 〆 

</article> 


<article> 

<hl>Most unique patron of the month</hl> 

<time datetime= ，’ 2012-02-18▼▼ >2/18/20 12</time> 


</article> 




J\,t to^i -time elemds 从 c 

dale blo 3 ? ost 

style, ^ kst). You aUo 

10 , tO\t ^ you 


WicVc us'mg 七 he datetirwe attribute 
o( 七 he <timc> clcmcia-t to tKc 

pvcdisc date us'm^ tKc o-f-fidial 七 cvhc 七 

datc/tn^c -foVmat -fov d3"tcs. 


Test drive the blog 

Test drive the blog again, and you should 
see the date of the blog post show up 
underneath each blog post heading. 


"ow we Kdve 
a daic below 
OdK bloj 
pos-tinj. 



Sfarfeuzz 

^Coffee 


beverages 

House Mnul, $1.49 

Morha Cab: Ulta 、 

Cappuccino, S1.89 

Oui let. 11.85^ 

ELIXIir 

*«VB dixin brw%od 
friends at the Head Hrst 

fitrm Tcm Owlir, 

RinspiMrry Iwamnsilnituni, 
* 2*99 

Wuobea> Wittlvlixir.S2.99 

Ortnbeny Antioxidant blast. 
$299 


BUrJc Brain Rrt-w- 


92.99 


5 Harbuzz meetn nocial m«dia 
3 /ia/aou 


i computer science 


Starbuzz 1 

3/10/2012 

can order, vve have your drink up, hr - y . 1 ^ ffcrcnl *nv customc 

seconds. I low do wc do it? 


read)* in 


ot (or cold if that's the w^yyou\%-aiit 


abnm ^^^onyourordrruntilit.sfinished ⑽ 丨 nxtntpjmd 阶 

益 E ㈣ 


With this d«sli 
wan! 
fair 


ntion 1 


MwA unique patrun of the month 
d/18/Mia 


providing all the caffeine 
you need to power your 
life, just drink it. 



OKI)h：K ONIJNKvkiOithc KKAN MACHINK 
FAST 
FRESH 

TOYOUKUOOK 

JVhy v^itPYoucaa order all our fine coffees ri^hi 
totcnKt with our new. automated Bean 
Madurvc. Howdocsit work? Just dick on the Bean 




i shipped to your door. 


咖 fr^mrrrd …二 
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html5 markup 


It seems like semantically each 
article has its own little header, with 
a heading and date. I assume we could 
even add things like a byline with the 
authors name and location. Is that the 
right way to be using article? 




It Sure is. Again, think of an article as a self- 
contained piece of content — something you could 
even take out and syndicate to another web page 
somewhere. And if you did that, you’d definitely 
want to add something like a byline with who wrote 
it, when, and maybe where. 


We can take this even further, because the 〈 header 〉 
element isn’t meant just for your main header; you 
can use it whenever you want to group together 
items into a header. For instance, you can add the 
<header> element to an <article>, a <section>, 


or even an <aside>. 

To see how this works, let’s go back and add some 
more 〈 header〉elements to the Starbuzz articles. 



Ko*tc -footcv CSr\ be used 

scdtio^s, 3V*tidlcs, dsidcs 
as v/ell- lA/icVc n 。七 jo'mj *to do 
oy\ £*t3vbuzz .； bu 七 si*tcs do 

dvcaic Kcadcv-s a^d -footevs -fov 
tKcsc elements. 


you are here ► 
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adding header elements 


How to add more <hcadcr> elements 


Adding 〈 header 〉 elements is straightforward. Within each 
<article> element, we’ll place a 〈header > to contain the 
heading and time. To do that, find the 〈 article 〉 elements 
within the blog section and add an opening and closing 
<header> tag to each one. 


〈section id="blog 
<article> 
<header> 



Pladc youv <Kcadicv-> dement Kcv-c, avou^d 


<hl>Starbuzz meets social media</hl> 

<time datetime= n 2012-03-12 n >3/12/2012</time> 
</header> 

<p>...</p> 

</article> 


<article> 

<header> 

<hl>Starbuzz uses computer science</hl> 

<time datetime= n 2012-03-10 M >3/10/2012</time> 
</header> 

<p>...</p> 

</article> 

<article> 

<header> 

<hl>Most unique patron of the month</hl> 

<time datetime= n 2012-02-18">2/18/2012</time> 
</header> 

<p>...</p> 

</article> 

</section> 


/Wake su\rc you add a <Kcadcv> -to 
㈡ dh 3v-(：idlc ih "tKc blo^ sc^ioh. 





Feel free to add an author byline to the header as well. Hmm, there isn’t an 〈 author 〉 element. 
Any idea how you might mark up an author byline? 
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Testing the header ^ 


Go ahead and add the 〈 header 〉 elements to the 
Starbuzz blog and give it a test run. 


rtmm, did you hotide v/iicn you loaded 
iKc pay tKa*t iKc Kcadcvs ihe 
av-ti^lcs dor /七 look TKc 

-fovmaitmg is all o^-f how.. 


C ft 


• file 


///ch«pt«rl2/ s urburr/b»og.html 


一 炒 farfewzz 

O Coffee 


]beverages 

Houtt. Bind, $ 1.49 
UodiaGiffUin, $3.35 
Okf^Kacio, Si.89 
Cl«i Tea. 

ELIXIRS 

Wt Frowsy ««rv» «(uin hrawadbv 
our monk at (be Head Hnt Louise. 

C««enTe. cooler. $a.« 

***l**ny loe CwwentraiJoo. 紅 99 
■uf6m> Biu lOlKlr. ta w 
OaniMtyAn^oxldint B««, $ 9m99 
01,1 


㈣ ： 

— 


1 fcm do “ do it? t 一 .— y«« w»ni it) M nS rr«dyin ■oeanda. 

i»laicfioni. 
onyovrortkr 








...providing ill the caffeine 
you nwd to power your 
life, just < 


f : 


p 

ORHKK ON.IJXK VfWi 如 HKA? 

FAST 

FRESH 

TOYOURDOOR 




e-ria* QO 啦 h «• !b •抑 p^ty 細 r 


^harpen your pencil 


Now that we’ve added the <header> elements, the spacing 
and formatting is off; did you notice we’ve got way too much 
space below the article heading and below the date, and the 
background color is all wrong? Any idea why? Write your 
ideas about why this might be happening below. 


take a look at 70 U, a,d 
tteve avc a ^7 o-tv^cv 外 cadcv> ^ 

be 伽 t 叫如❼ aAA 

V^cadcvs 70 U just added. 


you are here ► 
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fixing the header elements 


So, whafs wrong with the 
header awyway? 

Clearly, we’ve messed up the formatting a bit by 
adding the 〈 header 〉 elements. Why? Let’s take 
another look at the “starbuzz.css” file and check 
out the rule for the <header> element: 

header { 

background-color : 
margin : 
height : 

} 

丁 his Kcadcv- v-ulc hcigKi pv-opev-ty causes ihc 
ba^kjrouhd dolor -to be sei and io be added io 
A 匕匕 Kcadcv-s \n tKc page, i^o-t just ihc maih lieadev-. 
iKc mav-gih ish’t Kdpihj ciiKcv. 


#675c47; 

lOpx lOpx Opx lOpx; 
108px; 



We can fix this by creating a class just for the 
<header> at the top of the page. We might have 
several <header> elements in sections and articles 
throughout the site, and in our case, for Starbuzz 
Coffee, the <header> at the top of the page will 
always be treated differently from these other headers 
because it has a special graphical look. So, first find 
the top 〈 header〉element in your “blog.html” file 
and add a class named “top” to the element: 


^ ^ Surtoww Coftat - m»Q 

^ G ^ nir hr m .： 


SfaHbuzz 
7 Coffee 


HouccB 

Moch 屬 C 


BEVERAGES 

c fiteml 81.49 

t»W«cano, Si4)y 
Tm, 4i. A5 

elixirs 


RMpbmyloeQinoeomiiat^ $2.99 

■adimy 日 Wr , $a . 明 

Oaohary AnCknidaal tfao, $>>99 
CSkfti CJifller, 82.99 




•providing all the caffeine 
you need to power your 





KRKSH 

TOYouanooR 




«4ioar 

theapln 




C*osj^9iwi 

oirt»«PP«*rtma 


TKc vulc -fov siyl'mg iKc Kcadcv- v/ov-ks 
5vc3*t -fov *tKc mdm Kcddcv bu*t looks 
tcv-viblc -fov tKc Kcsdcv-s m *tKc 3vtidlcs. 


Add tlass ^ ks 七 

<bod y> ^ <V, ca acv> element m \>ay. 

<header class= n top n > 

<img id="headerLogo M 

src="images/headerLogo.gif" alt= n Starbuzz Coffee header logo image n > 
<img id="headerSlogan" 

src="images/headerSlogan.gif" alt="Starbuzz Coffee header slogan image"> 
</header> 


Add the “top” class to the top 〈 header〉in your “index.html” file, too. 
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Once you’ve added the “top” class to both your “blog.html” and “index.html” 
files, then all you have to do is update your CSS to use the class in the selector 
in the rules for the header: 


_ 一 added tlass sclcttov 

header. top { " *to iicadcv- \rulc m tiic CSS- 

background-color : #675c47; 
margin : lOpx lOpx Opx lOpx; 

height : 108px; 


header.top img#headerSlogan 
float: right; 


l/Ve added i*t *to tKis \rulc -too—while y/c dor / 七 need *to -fov- 
七 he sclcd*to\r *to wo\rk dov-v-cdtly ； i*t does make i-t mov-c dlcav- 
•m 七 lie c>^ad*tly ^W\t\\ hcadcv-Slojan wcVc sclcdtmj. Jus 七 

a little bcsi-^v-adtidc wov-k. 


A final test drive for the headers 


cc 
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Once you’ve made all the changes to your 
blog.html”，“index.html”，and “starbuzz.css 
files, reload the blog page. 


Notice that now the <header> rules apply 
only to the <header> at the very top of the 
page, which is just what we want. Meanwhile, 
the article <header>s get the default style, 
which will work fine as well. 


Kov/ iKc Kcadcv-s m tKc avtides 
avc -fov-matted dovvcd-tlyl 



Sfarfeuzz 

'•Coffee 


Mock* Ga£r Lalli 
Cappuoaoo. 蓦 i J 
OwiT_, 91.85 

elixirs 


byo«rfti«^ 

Lwjnjc 

OntnTt» 

fUtpbcny 


Codltf. 92 ^ 

_ lwCooa ™«l«u 

Bloebm>' Hiss £2uir. $2.99 

OnnbmyAmioxid«Dt HUct. 
* 2.99 

Qui QiQkr. $ 裹 99 

drain Kn*w, 8 主 vu 


3/u/aoia 
H*r» At surbim M»' n 


fanrwKj 
* K the Head First 




StjirbiLzz 

3/10/20x3 
K«vc>x>u ever noticed 


computer science 


5 避 

To pul] 


叫 customer 
HWUltjAIld 




M«st unique p.lnm of the month 

众 / 16/2012 




...providing all the caffeine 
you n«ed to power your 
life. ju*t drink it. 


ORDER **ith the HFJIN VA 


TO YOUR DOOR 


enter ,vur order, *,k 1 behind thr ^erne, 

^A J S! U，Ki(tfy0UW1I，l) ' 


your coffee u 


you are here ► 
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Dumb Quest! 


9ns 


We are doing a lot of work to add 
elements to the page, and it looks exactly 
the same as it did before! Tell me again 
what all this is getting me? 

We’ve replaced a few elements and 
added a few elements, and in the process, 
we’ve added a lot of meaning to our 
pages. The browser, search engines, and 
applications for building web pages, can — if 
they want 一 be a lot smarter about how they 
handle different parts of your page. And 
your page is easier for you, and other web 
developers, to read. Even though your page 
looks the same, it's a lot more meaningful 
under the covers. 

What’s the difference between a 
<section> and an <article> again? They 
seem similar to me. 


It is easy to get confused about which 
element to use, so we're glad you asked. 

The 〈 section〉element is more generic than 
〈 article〉，but it’s not as generic as <div>. For 
instance, if you’re just adding an element so 
you can style the page, then use a <div>. If 
you’re adding an element to mark up content 
that forms a well-defined section of related 
content, then use 〈 section〉. And if you 
have some content that can be reused or 
distributed independently from the rest of the 
content on the page, then use 〈 article〉. 

Should every <section> and every 
<article> always have a <header>? 

Most of the time, your <section>s and 
<article>s will have a <header>, or at least a 
heading (like <h1>). Think about it: content 
within an <article> element can be reused 
elsewhere, so chances are, that content will 


need a header for descriptive or introduction 
purposes. Likewise, content with a 〈 section 〉 
element is a group of related content in your 
page, so it will typically have some kind 
of header to separate and introduce that 
section of content. 

Should we use <header> only when 
we’ve got more than one thing to put in 
it? What if we’ve only got one heading 
and nothing else? 

You can use <header> even if you 
have only one heading to put in it. The 
<header> element provides extra semantic 
meaning that separates the header of a 
page, a section, or an article from the rest 
of the content. However, it’s not required 
that you always put your heading content in 
a <header> element (that is, the page will 
validate if you don't). 



k mtcvvicw with 

<div>’s feeling a bit left out... 


<A\v> 


Head First ： Hey <div>, we heard you’ve been feeling 
really down lately. What’s up? 

<div>: In case you haven’t noticed, I’m being made 
mostly redundant! They’re replacing me all over the place 
with these new elements, <section>, <nav>, <aside>... 


come along that are simply for creating generic structure. 

Head First ： Right! All these other new elements are 
specifically for adding semantic meaning to pages, and 
you’re much more general purpose. You’re what everyone 
falls back on when they need table layout, for instance. 


Head First ： Hey, Element-up; after all, I still see you 
in Starbuzz handling the “tableContainer” and the 
“tableRow”. 

<div >： They haven’t gotten rid of me completely yet, 
but if they keep inventing new elements, it won’t be long 
before it’s game over, man. 

Head First: The last time I looked, you were still in the 
HTML specification. Web developers have all sorts of 
special needs for adding structure to their pages and the 
standards guys (and gals) have no interest in inventing 
zillions of new elements. 

<div >： That’s true, and I haven’t seen any new elements 


<div >： That’s so true! 

Head First ： If you ask us, you were way overworked 
before these new elements came along.. .isn’t it time you 
start enjoying your reduced workload? 

<div >： You know, you make a good point. Maybe I 
should close down shop for a while and see the world; 
after all, I racked up a lot of frequent flyer mileage flying 
around the Internet. 

Head First: Hold on now, you can’t just disappear; most 
of the Web is relying on you... 

Head First: Hello? <div>? 
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html5 markup 


Being a forward-thinking 
CEO, I feel better knowing were 
making the page as semantically sound 
as we can. But don’t we need some 
navigation? How do I get from the home 
page to the blog? And back? 


We agree! Having multiple pages isn’t going 
to do us much good if readers can’t navigate 
between them. 

And to create navigation for these pages, we’re going to use 
some of the tools we already know about; namely, a list and 
some anchor tags. Let’s see how that works. 

First, create a set of links for our navigation: 


index.html">HOME</a> 
blog.html">BLOG</a> 

n >INVENTIONS</a> 

n >RECIPES</a> 

n >LOCATIONS</a> 


1/VcVc leav'm^ iKcsc -tKv-cc I'mks blank bcdausc >wc be add'mj 
-tKcsc pays, bui you should -feel -fv-cc -to dv-ca*tc iiicsc pajesf 

Now, wrap up those anchors in an unordered list so we can 
treat them as a group of items. We haven’t done this before, 
but watch how this works, and see how lists are perfect for 
navigation items: 

|s/oiidc iKai eadK Imk is y \ o^i an rtem m a 的 

厂 u^ovdeved This may 的。七 look mudK like 
6 ^aviaa-tioy\> bu 七 i*t v/ill v/Kcir\ v/c apply some s*tylc. 



<a 

href= M 

<a 

href= M 

<a 

href= M 

<a 

href= M 

<a 

href= M 



ftk///(hapM#12/MAf«wu/Ho4 


Sfaribuzz 

...providing 

|/ 7Coffee 

you need 




tft«we'rc embradaft the aoc*«l mcAa amtt. ， c.rc toins 

yofour comprtixwaadwe'pevMYdinetomnif^f 
rx-nMii—»y mw proA»c« liala jfwm 4T«« inwfck^dbttlyto« o«m 1 

Ptt^rk. forpA 'chrdag is"; Wrc (cint ••y bcyo«d (ha*, tad «»h lb* new 
frr>A»*1 rw«ry mpof amaAtK, *w»—if, hot Ster^n* kfaiagtoto k* 

«^thyMr MO«i MfMMiL 

fo—dli» aocoee ficboo? moc. rmalrc«dy Legion c«r fiaal prMotjrpc mul 

betwork cup acl wnir this, which Unis you, tke drinker, rifketo your itvotnt 
mxml WcVr maik • bugr iCTT«tncol to aalr Iba happen and 

ovatod • rMMbk oofirr oosrplrtr with RFQX NVC Blurtoot、《ad Wifi (no* 

to naiuoat few more thxnp the tKii M>Da kno«rabo«K. became hejr, rmjMithe 
«rfbagnyX 

So.he<pyo»cyfolfoy tii«inarintne%rciip. A«dnbepelcMJK«nieo 
tMMraoMlo ul youal akout tkia mw invMtio^, rtrnjht from <Urt>«B 
C<>f?rc 

Starbuxz turn computer 

3/io/toia 

lUve you o«r oolkcd kww effkknt • SUrbuz Ceffcc ko**e is? The lines a ； 
buvc fa«(. atd despite tbc MtrooMBiail nunberof diflemt drinb «a> cm 
canocdcT,t^k*«*>o«rdrakup,hot (oroDtdifUial'ttfatwajryocMWCitlcad 
rfiyawicwA liowdo^doit? 


<ul> 


<liXa href= n index.html">HOME</aX/li> 

<li class= n selected"Xa href="blog. html n >BLOG</aX/li> 

1 n >INVENTIONS</aX/li> 

,n >RECIPES</aX/li> 

1 n >LOCATIONS</aX/li> 


<liXa href 
<liXa href 
<liXa href 
</ul> 



Koiidc also tKat v/c av-c oy\c iicm as 

•tKc sclcdtcd by us'mj a dlass. 


you are here ► 
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adding navigation to starbuzz 


Completing the navigation 

Now place the navigation right into your HTML. Do that by 
inserting it just below the header in the “blog.html” file: 


<body> 

<header class= n top n > 

<img id= n headerLogo M 

src= n images/headerLogo.gif" alt= n Starbuzz Coffee header logo image n > 
<img id="headerSlogan" 

src= n images/headerSlogan.gif" alt= M Providing all the caffeine 
</header> 

<ul> 

<liXa href ="index.html n >HOME</aX/li> 

<li class= n selected"Xa href= n blog.html M >BLOG</aX/li> 

<liXa href= n n >INVENTIONS</aX/li> 

<liXa href= ,,n >RECIPES</aX/li> 

<liXa href= n n >LOCATIONS</aX/li> 

</ul> 


</body> 


Adding the navigation CSS 

You can try that HTML if you want, but you won’t be satisfied that it feels 
anything like “navigation.” So, before you try it, let’s add some CSS: 、 


二 ：2 V: 二 '^ : 


ul 



background-color : #efe5d0; 
margin : lOpx lOpx Opx lOpx; 
list-style-type : none; 
padding : 5px Opx 5px Opx; 


WcVc add'rnj a badkg\rouy\d dolov, a^d some mav-jms 

Mohec botto 你 mav-j'm is 0 because table display 

already Kas a I Opx. bov-dcv--spad'm 5 ai "top. 

Also notice 七 lia 七 we’ve v-emoved 七 he bullc*ts -fvom 七 he I is 七 items. 


ul li { 

display: 
padding : 


inline; 

5px lOpx 5px lOpx; 



Wert, v/cVc display o( cadK list -from w blotk w 

*to so hov/ *tKc list i 七 >wor/*t 3 d3vvi3^c vc*tuvn 

be-fov-e a^d a-fiev-; iKcy II all -flow m-to ot\t l"mc oy\ iKc page like 
vcjuUv "mime clcmcr\*ts do- 


ul li a:link, ul li a:visited 
color : #954b4b; 
border-bottom : none; 
font-weight : bold; 




Wc >wa^i tKc links in 七 lie navigation list to look a bit 心。州 

iKc v-cst o( iKc links m tKc SO >wc ovc\r\ridc iKc otKcv \rulcs -fov <a> 
(above tKis vulc m iKc CSS) W\i\\ a vulc iKai scis ^vo^cvtics -fov boiK 
七 he Imks dhd iKe visiicd staic o( tKc links (so tKcy look the same). 


ul li.selected { 

background-color : #c8b99c 


Md -finally, wcVc scitmg 七 he badkgv-ound o( iKc <li> clcmcvvt 
wi 七 li tKc dlass w sclcdicd w so the rvavijaiiorv item 
*to 七 he page wcVc oy \ looks -f\rom -the v-cs*t- 
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Who needs ftPS? living 
the wavigatiow a test drive 

Let’s give this a try. Go ahead and get the 
CSS typed into the bottom of your CSS file, 
and then load it in your browser. 

Hey, not bad for a first try. We’ve got a nice 
navigation bar that even has the page we’re 
on — the blog page — highlighted. 

But.. .can we take this even further? After all, 
you’re in the “modern HTML” chapter and 
we haven’t used a new element from HTML5 
for the navigation yet. As you’ve probably 
guessed, we can improve this by adding a 
<nav> element to the HTML file. Doing so 
will give everyone (browser, search engines, 
screen readers, your fellow web developers) 
a bit more information about what this list 
really is … 


e o o 


Mfii#7//fmptfri?/<fafhuyy/biog,hrmi 


Starbuzz Coff«e - Blog 


Sfarfewzz 

VCof/ee 


HOME BIOS INVENTIONS RECIPES LOCATIONS 



BEVERAGES 
House Blend, $1.49 
Mocha Cafe Latte, 

S 2.35 

Cappuccino, $1.89 
Chai Tea, $1.85 
ETJXIRS 


We proudly serve 
elixirs brewed by our 
friends at the Head 
First Lounge. 

Green Tea Cooler, 
$2.99 

Raspberry Ice 
Concentration, $2.99 

Blueberry Bliss 
Elixir, $2.99 


Cranbeny 
Antioxidan 
* 2.99 


t Blast, 


Chai Chiller, $2.99 

BlacJc Brain Bit*w, 
如 99 


Starbuzz meets sMMrial media 
3 / 12/2012 

Here at Starbuzz we're embracing the social media 
craze. I? fact, we’re going further than any of our 
competitors and were very close to announcing a 
rcyolutionaiy new product that links your coffee 
drinking directly to your social network. Forget 
checking in ,r ； we’re going way beyond that, and with 
， new product every sip of smooth, aromatic, hot 
Starbuzz blend is going to to be shared 
network. 


cd with your social 


Sound like science fiction? Its not; Tm already testing 
0l ^ P rotot yP e social network cup ns I write this, 
which links you, the drinker, right to your favorite social 
networks. We’ve made a huge investment to make this 
happen and wc'vc created a reusable coffee cup 
complete with RFID, NFC, Bluetooth, and Wif, (not to 
mention a few more things the tech folks know about 
because hey, I’m jiwt the coffee guy). 

^ your eyes out for this amazing new cup. And IT 1 

be releasing a video teaser soon to tell you all about this 
new invention, straight from Starbuzz Coffee. 


Starbuzz 1 
3/10/2012 


1 computer science 


Ilavc you ever noticed how cfficicnta Starbuzz Coffee 
house is? The lines alway move fast, and despite the 
astronomical number of different drinks any customer 
c^n order, we have your drink up, hot (or cold if that's 
the 抑打叫 want it) and ready in seconds. Hr>w 1 wc 






.providing all the caffeine 
you need to power your 
life, just drink it. 




r 


ORDER ONLINE with the BEAN 
MACHINE 
FA 5 T 
FRESH 

TO YOUR DOOR 

Why wait? You can oixler all our fine 
coffees right from the Internet with 
our new, automated Bean Machine. 
IIow docs it work? Just dick on the 
Bean Machine link, enter your oixler, 
and behind the scenes, your coffee is 
roasted, ground (if you want), 
packaged^ and shipped to your door. 


Adding a <wav> element... 


As you already know, there is a <nav> element, and using 
it is as simple as wrapping your navigation list with <nav> 
opening and closing tags, like this: 


<nav> 

<ul> 


Hcvc's -tKc <y\av> s-bayrtmj -tag； a^d v/cVc c^dlosmj 
七 lie h3viga*tioir\ lis*t a <v\B^> element 


<liXa href = n index. html">HOME</aX/li> 

<li class= n selected M Xa href = n blog.html">BLOG</aX/li> 
<liXa href= M n >INVENTIONS</aX/li> 

<liXa href= nn >RECIPES</aX/li> 

<liXa href=" n >LOCATIONS</aX/li> 

</ul> 

</nav> 
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targeting navigation list items 



Before we do any more 
testing, we really need to 
talk about your CSS. 


We should really talk about best practices. You see, right now your CSS assumes that 
every unordered list is a navigational menu. So, what happens when the Starbuzz CEO 
needs to add a list of new cafes he’s going to open in the blog? Disaster — he’ll probably 
get a navigation list right in the middle of his blog because it will be styled just like the 
navigation list we just added to the page. 

But no worries; to fix this potential problem, we just need to be more specific about 
targeting the navigation list items, and that’s not hard because the only navigation list 
items we want to target are the ones contained within a <nav> element. 





Before moving on, think through how you’d change the CSS to 
specifically target the navigation items, and no other unordered lists. 
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html5 markup 


Making our CSS more specific... 

Okay, let’s use the fact that we have a <nav> element in the HTML and make the 
selectors more specific. That way, we ensure that future changes to the HTML 
(such as adding a innocent <ul> element to somewhere else in the page down the 
road), don’t result in any unexpected styling. Here’s how we do that.. .but notice that 
we do have to make a few adjustments to the margins of the <nav> element so it 
behaves correctly. 


nav 


background-color : #efe5d0; 
margin : lOpx lOpx Opx lOpx; 


added a vulc -fov tKc <^3v> clcm ⑶七 and moved 
pvopcv'tics -fov sc*tt … 3 "tKc bddkjvouhd dolov nr»3\rjm irrto "this vulc ； 
so cvcv-y-tK'mg m tKc <^av> clcmchi jcis s-tylcd wiiK iKcsc pvopcrtics. 


nav ul { 

margin : Opx; 
list-style-type : none; 
padding : 5px Opx 5px Opx; 


/Ud weW added a io sci iKc o( iKc <ul> 

clcmch-t to O, so ii -fiis smugly y/iiKih ihc <hav> clcmchi (by 
dc-fauli <ul> dements have a mairgih ihai y/ill dausc iKc <ul> 
■fco be sKi-Picd over a bii i-f y/c dov\{, sci i"t *fco O). 


nav ul li { 

display : inline; 

padding : 5px lOpx 5px lOpx; 
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nav ul li a:link, nav ul li a:visited { 
color : #954b4b 

border-bottom: none; V /s/ot，^ wc added W 
font-weight: bold; ^ bo-fcK … les 

} ^ulc wi-feK -two seledio^s 

nav ul li.selected { 

background-color : #c8b99c; 



Ta - da! Look at that navigation 

Get these changes into the CSS and give it a try. Not 
bad, huh? And now we can rest assured that any future| 
<ul> elements won’t be affected by the navigation GSS| 
Remember, when possible, add the most specific rule 
you can to style your elements. 


F'mally> -fov A 匕 L *tKcsc vulcs, v/c^c added *tKc 
sclcd.'fcov - w k\ 3 v w *m -fvoir\"t o( so vules 

OMlY <ul> elements iKat v/itii'm a <^av> 
TKai v/ay, >wc dar\ be sure iKai i-f 仏 c 
CEO adds a <ul> *bo Kis bloj ih -futuve ； i*t >woh *t 
yt styled like a havijaiio^ list! 




home 


223 


^j^^QNS R£ C1 

BEVERAGES 

House Blend, s M9 以冰⑽ "• 咖 medi 






Mf j»»t drink it. 


■ ModLiCafeUtte 

■ ^ 3 S 

Gppuccino, S1.89 

■ ChaiTca, 幻•你 

■ p UXlRS 
^.proudly ^ 

I 

I Hret Lounge. 

G»«cn Tea Cooler 

I *2.99 , 

^Pbcrrylce 
Concentration, $ag9 

81 Wbcny Bliss 

™wr, $2.99 

Cmu: 

Antioi 


I 


f Blast ， 


beny 
aidant 1 
$2.99 

^ChiUcr •鉍的 

flack Brain Bn 
$2,99 


3/ia/2oia 




份 arhu^j ； 

3/10/2012 


amazing ni?H 

ntoteliyoua^^ 

SUrbuzz Coffee, 
^mputcr science 




。咖 R0NU N E — 祕 
WACHIKE 
PAST 

TO your DOO R 


is? Theiin^ 
站 tfonomicaj 






owdot 
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getting video into the blog 



TO YOUR DOOR 


teep >r>ur eyes out for Otis 
I «U about this ocutr immtio： 


' 3/10/2012 

sssss 

Moat unique p.twm ofth« month 
a/18/ 3013 by SUrbuzi CKO 


ftevVs 七 he £*ta\rbuzi. blog 
fajC ； dom^lc*tc wi*tK all ou\r 
\rcdcvrt imp\rovcmcir\*ts... 


Hey, if I could get you guys to stopgeeking 
out over your new HTML5 elements for a minute, Ive 
got some great news ： weve just finished creating our new 
Tweet Sip cups. Ifs a revolutionary new technology ： take 
a sip of coffee and have your status updated on Twitter. I 
just did a new video demonstrating it working! Can we get 

it on the blog!? 


/W he wav\*ts *to pu 七 a 
video v-ijlvt "m 七 lie page, 
jus 七 like 七 liis". 


IS so 


0\\, dy\d this Twee 七 Sip 七 edVmology 
ear 七 h-sha 七七 e\rmgly useful, he y/a^-ts us 
b> assume wcVc Uhdcv- a w -f\ricndi-D/\ W .- 
v/c *told liim you’d loe good with -that- 
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html5 markup 



Jim: Well, we used to need Flash for 
video, but with HTML5 we now have a 
<video> element we can use. 

Frank: Wait, isn’t Flash still better? It’s been 
around a long time. 

Jim: I could see some short-term arguments for that on the 
desktop, but what are you going to do on certain mobile 
devices that don’t support Flash? Think of how many 
mobile users Starbuzz has; some of those customers are 
going to be in the dark if we use Flash. 

Frank: Got it. So how do we go about using an element 
to do video? 

Jim: Think of video like the <img> element; we supply 
a src attribute that references the video, which is placed 
in the page at the location of the <video> element. 

Frank: That sounds easy enough. This is going to be a 
piece of cake. 

m: Well, let’s not promise anything too quickly. Like most 
media types, video can get complicated, especially when it comes 
to dealing with the encodings for video. 

Frank: Encodings? 

Jim: The format used to encode the video and the audio of a video clip. 
Frank: That’s a big deal? 


Jim: It is because the browser makers haven’t agreed on a common standard 
for video encodings. But let’s come back to all that. For now, let’s get a 
<video> element in our page and see what all we can do with it. 

Frank: Sounds good; lead the way! 
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Creating the new blog entry 


Let’s get started by adding a new blog entry，which in HTML-speak, should 
be a new 〈 article 〉 element. Go ahead and add this HTML just under the 
〈 section 〉 element, above the other articles: 


<article> 



MA tKis \y\ w bloj w <scdtioir\> at the … 


<header> 

<hl>Starbuzz launches...Tweet Sip</hl> 

<time datetime= M 2012-05-03 M >5/3/2012</time> 

</header> 

<p> 

As promised, today I'm proud to announce that Starbuzz 
Coffee is launching the Tweet Sip cup, a special Starbuzz 
Coffee cup that tweets each time you take a sip! Check 
out my video of our new invention. 

</p> 


</article> 


1/VcVc jo'mj *to add 七 lie Video \rijM ： Kcv-c, 
below 七 he pav-ajv-apli m 七 he blog etvbry. 



And wow, introduemg the <vidco> element 


At first blush, the 〈 video 〉 element really is similar to the <img> element. In the 
chapter downloads, you’ll find a file named “tweetsip.mp4” in the “video” folder. 
Make sure the “video” folder is at the same level as your “blog.html” file. Then add 
this markup to your page right below the closing </p> tag and before the closing 
</article> tag: 


Hcvc v/c V>avc 

video ^ ―桠 a 




〈video controls autoplay width:，▼ 


I/Vcll dome badk *to dc*tails o( all tKcsc atbribu 七 cs m a set, 
but -fov- now hotide wcVc the widtii dndi c^f the 

elemeirt, aloirvj wi-tK spcdi-fymj a sv-d URL -fov- -tKc video. 

\ 

512 n height= M 288 n src= n video/tweetsip.mp4"> 




“一 we 一 H。— ％ 


l/Vdl see wKat dohient wc dan flade in Kcv-c m a bit as well... 
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SUrfouzz launches … Tweet Sip 

S/3/2012 

X ' UK ^y£ ra |m，utl to anmmnnrlluil Slnrhuw Coffer w bium-iiinK thr 1 W» Sip cm a 

fn^Lfi art>Ua cup that twccucichliinc you take a sip! Check out my video of our no^' 






ORDER ONLINE with the DEAN : 
FASrr 
FRKSH 

TO YOUR DOOR 


Why* wait? You can order all our fine coffee* right from the 
Inirmrl vvith mir m*w ， Jiulamatwl K«m Mauhinr. How dors it 
wor^t? Just click on the Bean Machine link, enter your order, and 
Im IuikI thr sermrs, your n»fTrc U rtiaslrd, Krournl (if>t)u wmil 乂 
packaged^ and shipped to vour door. 


5harbim; meetA social niMlia 


3 /12/2012 

Hcn?ttl ^ cmbrucnaglhc vucial roctlia crawr. In fad. wc'tr going furtlier iban uay of 

our competitor* *nd w re vcr> dose to announcing a revolutionary new product that links your 

卜 . t l nM ^* ，r，，rtlyl0 ^ Ur 知 ⑽ 1 nrlvwrk * Kir K«*t •A.-rkmK ，,.-； wr*rr 抑 y 

一『 tm ° 0th - 咖 ― SUr— UgoLng.o.0 

tMiaKourrmul »ri.l n .i m >rk n .p, u I 

1,50 dnnkcr * to your favorite social networks. We've nude a huec 
iSvf^Si 011 } 10 P* 1 * ^.^PP^n and we've created a reusable coffc«cup complete with RFID, 

^KTAx^ ( r tom ㈣ 刪 fcwmorcthin6sih * techfoua : ibout .二 

So. tecpyourprctouiforihu anuangnewcup. And HI b« relcuingavideo teaser soontoteU 
ymi all about this new invention, xlrni^il from SliiHnm(^)ffiv. 

Starbuzz use« computer science 

3/10/2012 

t VC ?^ CVC i tmoentA Starbua Coffee bouse is? Tlui lines ih«a> mov« fist, and 

jhc a^noxnKaJ number of different drinks my customer can order, \vc have vour drink 
up, hot (or cold if that s the v.i>- yx>u want it) and rca^y in seconds. How do we do it? 

ro puIlthi«off. wcuteAdvMUgcofUw latent and greatest in computer sdenoe. In fact. tr^in 

,,,r !i,aff,Mbron<!b, « ^wtnhulrd ntimputcrr. Thi-cnsltirr. errakr l)u> cmlrn for t)u- dislribulwl 
f m f utc f* compete with your name and the drinks special instmetioM. Then our jpedaliicd 

lrmk m«krr« grab !hr mrxt cup and 职 ahoul working on your artl«*r until it's finiKliccl. 

operation ao>-time we want. All we need to 

»^r«c)^5icawt rS makcrs(not t0 mention a fair amount of support vtaffyou 

Vlwt unique patron of the munlh 
t/18/aoia by Starbuzz CEO 

m05t uni( l 议 patron of the rootith award goes tot customer in PouUbo, Washington, whose 
jily intirniry;nrtlrr is n six syjrnda, no-foam, l30^r K n*p nmi fat aiy l:»Hr, with the* n P Ii tnLi 
U rred m before the milk is added* Do we have unique customers or what? 







c O file7//chapttrl2/sUrbu22/b«09Video.hlinl 


» ^ 



BEVERAGES 
Houm Blend. $1.49 
Morfwi Cnfe Uttr, 82.35 
C«ppucclno. $1.89 
OiailVa, 

El 

We proudly save dlxirs brewed by our 
Mends at din Head First Lounge. 

(■nm Tm OkiUt, $v.yy 

Kaspbcn>' ice Conccotntion» S2.99 

MuHmy Blivi Klixir, ftv.w 

Qrinbeny Antioxidant Blast, sa.99 

CJui Chiller. $2.99 

Ulack llrain Brew, S2.99 


BUXIRS 

Vc proudly se 


1 

< 

} 


1 

2 

s 


Lights, camera, action 


••• 


Get this new markup in and give it a try! Hopefully you’ll see what we do 
here, but if you don’t, keep reading ~ -you’ll soon know how to fix it. 


ttevVs ouv- video embeddedi m *tKc 
page wKcv-c we pu 七 i 七 wi*tK 七 he 
do\r\rcd*t wicl 七 h and Kciglvt. 


p,a vou y^ohu tv>c Video staged 

su ?? l»cd ar, u auto ? lav attv»Wtc. 
Just vc^ovc »t ar^d tV. c usev ^11 

V^avc bo ? la 7 ^ scc V，dc ° 



rr:^ 


Not bad for a couple lines of markup, huh? But don’t rest too easy 
(especially if you aren’t seeing video yet); we still have a lot to learn 
about the <video> element. Let’s get started... 


一 ■ © sou, Starbuzz CoOec 

rr*l 曲 tvAtmmA% ftppMHng on thb dtr «rr th<> prnprrty ofthHr rnMivr amm. 


Sfarfeuzz 

OCoffee 


".providing all the caffeine 
you need to power your 
life, just drink it. 
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video formats can cause issues 


By *tV\c Y ou 
y-edd 七 Vis, these 
-(*OVW'3't S 6ould 
be mov-c Wch/ 
su^^>ov**tcd atvo ss 
all bvoy/sevs. So i*f 
youv video 、 y/ovkm^, 

ycat Always 
七 V>c lA/cb -b see 

七 V>c latest o” 七 Vis 

uvvfold •” *to〆. Ad 

^cll dome batk -fov- 
mOVC OV\ 七 WlS 

sKov-tly- 


Tm not seeing any video. Ive 
triple-checked the code and 
I have the video in the right 
folder. Any ideas? 


Yes, it’s probably the video format. 

While the browser makers have agreed on what the 
<video> element and API look like in HTML5, not 
everyone can agree on the actualformat of the video files 
themselves. For instance, if you are on Safari, H.264 
format is favored; if you’re on Chrome, WebM is favored; 
and so on. 

In the code we just wrote, we’re assuming H.264 as a 
format, which works in Safari, Mobile Safari, and IE9+. 
If you’re using another browser, then look in your “video’ 
folder and you’ll see three different types of video, with 
three different file extensions: .mp4, .ogv, and .webm 
(we’ll talk more about what these mean in a bit). 

For Safari, you should already be using .mp4 (which 
contains H.264). 

For Google Chrome, use the .webm format by replacing 
your sre attribute with: 

src= n video/tweetsip.webm" 



If you’re using Firefox or Opera, then replace your sre 
attribute with: 

src="video/tweetsip.ogv" 

And if you’re using IE8 or earlier, you’re out of luck — 
wait a sec; this is Chapter 12! How could you still be using 
IE8 or earlier? Upgrade! But if you need to know how to 
supply fallback content for your IE8 users, hang on; we’re 
getting to that. 



this a ivy {o 
you joih^* 
化 ― io all 

■this ih a bit 
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html5 markup 


How does the <vidco> element work? 

At this point, you’ve got a video up and playing on your page, but before 
on, let’s step back and look at the <video> element and its attributes: 


we move 




|*f d.oy\*tvols d.3uscs 

playcv {jo supply d.oy\*tvols (or d-o^-tvollmj 
video dy\d audio j>l3ylo3tk- 

TV au-toplay aiiv-ibu-tc causes iiic video 
{o start playback upon load- 



<video controls 
autoplay 
width= n 512 n height= n 288 n 【 
src= n video/tweetsip.mp4 n 


Kotitc tKat ttc 6oir»*brds a 的 d 

autoflay a*t*tv-'iku*tcs av-c a little 
diWcv-c^t -fv*or»v otV^cv- attributes 
you vc sccy> so art Wool 必 

atbribu 七 es” 从 a 七 have ⑽ value. So, 
-fov- i-f to^tv-ols »s 

^cy> i\\t video to^broU Will sVuw 叶 . 

to^broU »s not tteve, tV^c 
v,aeo to^WoU dor!i sKov/ uf. 


TKc v/idiK a^d KcijKi o( iKc 
video *m 七 he pay 


_ _,__ x _ 丁 k souvdc lodd^tioh o-f "tKc video 

poster= n images/poster,png n 
id= n video n > 

</video> l*f you like, you Uh suffly ah 

ofiiohal foster image -to show y/kh 

J "tliC movie is hoi flayihj. 

0( ^ouirsc, y/c tar\ add ar\ id -to the 

clcmchi -too \y\ t^%t v/e y/^hi io 

apply sor^c sivli^A. 



A little Webville good video 
etiquette: the autoplay attribute 

While autoplay may be the best thing for sites like YouTube 
and Vimeo (or WebvilleTV, for that matter), think twice 
before setting it in your <video> element. Often, users want 
to participate in the decision of whether or not video is 
played when they load your page. 
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overview of video attributes 


Closely inspecting the video attributes... 

Let’s look more closely at some of the more important 
video attributes: 



SPC 


The controls attribute is 
Boolean attribute. It’s either 
there or it ? s not. If it is there, then 
the browser will add its built-in 
controls to the video display. The 
controls vary by browser, so check 
out each browser to see what they 
look like. Here’s what they look 
like m Safari. 


Lv ： ^ m isL/liat video 

Id 











a 卿 Jay 

The autoplay Boolean attribute tells the 
browser to start playing the video as soon 
as it has enough data. For the videos we，re 
demoing with, you ，U probably see them start 
to play almost immediately. 


It 


Video ㈣ cv 


The sre attribute is just like the <img> element^ 
sre — it is a URL that tells the video element where 
to find the source file. In this case, the source is 
Video/tweetsip.mp4 5? . (If you downloaded the code 
for this chapter ， you’ll find this video and two others 
m the “video” directory). 

prel^a^ 

The attribute preload is typically used for 
fine-grained control over how video loads 
for optimization purposes. Most of the time, 
the browser chooses how much video to load, 
based on things like whether autoplay is set 
and the user’s bandwidth. You can override 
this by setting preload to “none” (none 
of the video is downloaded until the user 
“plays” it), “metadata” (the video metadata is 
downloaded, but no video content), or u auto’ 
to let the browser make the decision. 




1 


poster 

The browser will typically display one frame of 
the video as a “poster” image to represent the 
video. If you remove the autoplay attribute, 
you’ll see this image displayed before you click 
play. It’s up to the browser to pick which frame 
to show; often, the browser will just show the 
first frame of the video...which is often black. If 
you want to show a specific image, then it’s up 
to you to create an image to display, and specify 
it by using the poster attribute. 


height 

The width and height attributes set the width and height of the 
video display area (also known as the c Viewport 5 ). If you specify a 
poster, the poster image will be scaled to the width and height you 
specify. The video will also be scaled, but will maintain its aspect 
ratio (e.g., 4:3 or 16:9)，so if there’s extra room on the sides, or the 
top and bottom, the video will be letter-boxed or pillar-boxed to 
fit into the display area size. You should try to match the native 
dimensions of the video if you want the best performance (so the 
browser doesn’t have to scale in real time). 


Pilla\r-bo%*mg 


V 




Another Boolean attribute, loop automatically 
restarts the video after it finishes playing. 






-boxihj 
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I was testing on different 
browsers, and the controls look 
different on each one. At least 
with solutions like Flash, I had 
consistent-looking controls. 



Yes, the controls in each 
browser are different with HTML 
video. 

The look and feel of your controls is 
dictated by those who implement the 
browsers. They do tend to look different in 
different browsers and operating systems. In 
some cases, for instance, on a tablet, they 
have to look and behave differently because 
the device just works differently (and it’s a 
good thing that’s already taken care of for 
you). That said, we understand; across, say, 
desktop browsers, it would be nice to have 
consistent controls, but that isn’t a formal 
part of the HTML5 spec, and in some cases, 
a method that works on one OS might clash 
with another OS’s user interface guidelines. 
So, just know that the controls may differ, 
and if you really feel motivated, you can 
implement custom controls for your apps. 




Wc do *UVis iy\ 

HT/V|L^ Come jom 

us JavaS^v-ipi is 
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video format overview 


What you need to know about 


video formats 


We wish everything were as neat and tidy as the 
<video> element and its attributes, but as it turns out, 
video formats are a bit of a mess on the Web. What’s 
a video format? Think about it this way: a video file 
contains two parts, a video part and an audio part, and 
each part is encoded (to reduce size and to allow it to be 
played back more efficiently) using a specific encoding 
type. That encoding, for the most part, is what no one 
can agree on — some browser makers are enamored with 
H.264 encodings, others really like VP8, and yet others 
like the open source alternative, Theora. And to make 
all this even more complicated, the file that holds the video 
and audio encoding (which is known as a container) has 
its own format with its own name. So we’re really talking 
buzzword soup here. 

Anyway, while it might be a big, happy world if all 
browser makers agreed on a single format to use across 
the Web, well, that just doesn’t seem to be in the cards 
for a number of technical, political, and philosophical 
reasons. But rather than open that debate here, we’re 
just going to make sure you’re reasonably educated on 
the topic so you can make your own decisions about 
how to support your audience. 


Tiicvc avc iKv-cc 
video m use 


atv-oss iKc majov bv-ov/sevs. 


广 TVis is a d.ov\*t3'mCV-... 



…七 ha 七 

d • 。灼 a 

video and 

d 灼 audio 

j 

ly iiic video 

da-ta. 


Vorbis Audio 
icoding 


WebM Container 


Vp8 Video 
Encoding 


Let’s take a look at the popular encodings out there; 
right now, there are three contenders trying to rule the 
(Web) world... 

Youv- mileage may vav-y by i\\t iime 
you veddl book, as -favoved 

*tcy\di bo ovcv- 七 ime. 



Eadii toy\sisis o( 3 

tov\ia'\Y\ty -type (like lA/cbM, 

MP 午， Ogg) a video av\d 
audio Oikc \/P® 


Vovbis). 


Tke HTML5 specification allows lor any video format. 
It is tke browser implementation tkat ctetermines wkat 
formats are actually supported. 
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html5 markup 


The video format cowtewdcrs 

The reality is, if you’re going to be serving content to a wide spectrum of users, 
you’re going to have to supply more than one format. On the other hand, if all 
you care about is, say, the Apple iPad, you may be able to get away with just one. 
Today we have three main contenders — let’s have a look at them: 


MP4 container with 
H.Z64 video and AAC audio 

H.264 is licensed by the MPEG-LA 
group. 

There is more than one kind of 
H.264; each is known as a “profile.” 

MP4/H.264 is supported by Safari 
and IE9+. You may find support in 
some versions of Chrome. 


WebM container with 
VPS video and Yorbis audio 

WebM was designed by Google to 
work with VP8-encoded videos. 

WebM/VP8 is supported by Firefox, 
Chrome, and Opera. 

You’ll find WebM-formatted videos 
with the .webm extension. 


Ogg container with 
Theora video and Yorbis audio 

Theora is an open source codec. 

Video encoded with Theora is 
usually contained in an Ogg file, 
with the .ogv file extension. 


H.2 •厶千 is 七 lie 
mdusiv-y dav-l'mj, 

but Y\o{, 


d.Kamp... 




Tiicov-a is 七 oytv\ 
souv- 6 c 


Ogg/Theora is supported by 
Firefox, Chrome, and Opera. 

r 

\/P 見七 he do 於七⑶ dkv ， 
is backed by 6 \oo^\t, 
su\>po\rtcd by oiiicvs, ad 
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support for video formats 


二 ss ， 

BELOW (HINT, 


TOP SECW] 


:祕 report back ^ ^ ⑽。 , 
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How to juggle all those formats... 

So we know it’s a messy world with respect to video format, but what to do? Depending 
on your audience, you may decide to provide just one format of your video, or several. In 
either case, you can use one < source 〉 element (not to be confused with the src attribute) 
per format inside a < video 〉 element to provide a set of videos, each with its own format, 
and let the browser pick the first one it supports. Like this: 


v/cVc v-cmov'mj svt 
attribute -from <video *1^3 … 


...Ad addi^ tKircc <sou\rde> iay, 從 h y /如 its 
ovrn 把 aUlribu-tc, wi-tK a vcv-sio^ o-f -tK c 
video \y\ a di-ffc\rCK>-fe 



〈video controls autoplay width= M 512 n height="288 
sre= M video/tweetsip.mp4 M > 

<source src= M video/tweetsip.mp4"> 

<source src= n video/tweetsip.webm n > 

<source src= n video/tweetsip.ogv n > 

<p>Sorry, your browser doesn't support the video element</p> 

</video> 



This is wKa-fe the 
birowsc\r shows i-f i-fc 
docs/t suppov-i video. 


>wovk its ^ ^ 

Jfov^at \i ^ ?>a 7 - ^ 

Pov- eaA souv-dc, {ht bv-ov/sev- loads the 
mc*tadia*ta <^f video -file -to see i-f ii 
play i 七 (v/iiidii be a pv-od-css, 

v/e ddy\ make i 七 easier oy\ 
bv*ov/scv"...scc 七 he M 乂七卜 3 € ). 






BULLET POINTS 


■ The container is the file format that’s used to package up the video, audio, 
and metadata information. Common container formats include: MP4, 
WebM, Ogg, and Flash Video. 

■ The codec is the software used to encode and decode a specific encoding 
of video or audio. Popular web codecs include: H.264, VP8, Theora, AAC, 
and Vorbis. 

■ The browser decides what video it can decode. Not all browser makers 
agree, so if you want to support everyone, you need multiple encodings. 
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details of video formats 


Take 1 : lights, camera, action... 

Okay, if you were having trouble seeing video, add the 
markup on the previous page, and even if you weren’t 
having trouble, add it anyway. Give the video another try. 
Try it in a few different browsers, as well. 


Now 七 lie video should be 
wo\rk'mj dv-oss-bv-owsev/ 



How to be even more specific with 



your video formats 


Telling the browser the location of your source files gives it a selection of 
different versions to choose from; however, the browser has to do some 
detective work before it can truly determine if a file is playable. You can help 
your browser even more by giving it more information about the MIME type 
and (optionally) codecs of your video files: 


TV *filc vo u use \y\ -the s\rd is a 


you 


donta'mcv- -Fov- the adiual video (and 
audio and some me 七 add 七 a). 


1 nc c °occs pa\rdr»»ctCV- spc^i-rics 
wliidh todtU wc\rc used Jpov ChdodihJ 
video dudio ~(jo 七 ^ 

eroded video -file. 


TV^c video todtt 



audio todtt 


<source sre: 


video/tweetsip.ogv n type='video/ogg; codecs= n theora, vorbis"'> 



■type is 釙 optional aUvibu-tc 
■that is a liihi -to ilic bvowsev -to 
Wp _ 七 -fijuve out i-f i-fc play 
"this kihd o-p -file. 


TV>-,s «s MIME 
o^- video ^\\t- l*t 

ics to 灼 * t3 •… cv* 

一 ^4- 




Z 1 


Notice double Quotes or\ *tlic toAtt% 
pav-arwc*tcv*. This medr\s y/C *to use single 
quotes a\rouhd -the attvibutc. 


Next, you’ll update your <source 〉 elements to include the type information for 
all three types of video we have. 
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Update awd test drive 

Update your 〈 source 〉 elements like below, and give your page a test drive: 


〈video controls autoplay width= M 512 M height= n 288 M > 

<source src= M video/tweetsip.mp4 n type='video/mp4; codecs= n avcl•42E01E, mp4a.40.2 
<source src="video/tweetsip.webm" type='video/webm; codecs="vp8 , vorbis"'> 
<source src= M video/tweetsip.ogv" type='video/ogg; codecs= n theora, vorbis"'> 

<p>Sorry, your browser doesn't support the video element</p> 

</video> 


> 


l-f yo\A cW 七 know the dodeds fav-ametevs ； 七 ^ you 

匕扣 leave jus*t use -tliC A1|AlE -type. 

It will be a little less but most o( iKc 

time, *tha*t ； s okay. 


Uc todtts ^ 4 午 a 代 mo^rc to^\\taitd iv/o bcdausc 

VvZ 心午 supports various di 以饮⑶七 

uses (like v/s. U ba^aw.a^). -to jci i^osc ^i } 

yo^ll {p k^ov/ mo^rc dc-tails about Youy video v/as tUodtd. 


Most likely, your video will play as before, but you’ll know that behind the scenes you’re 
helping the browser with the additional type and codec information. If and when you do 
your own video encoding, you’ll need to know more about the various options for the type 
parameters to use in your source element. You can get a lot more information on type 
parameters at http : // wiki . whatwg. org/wiki/Video_type_parameters . 


tWeiare no 

Dumb Ql] 


Questions 


Is there any hope of getting to one 
container format or codec type in the 
next few years? Isn’t this why we have 
standards? 

A- 

There probably won’t be one encoding 
to rule them all anytime soon—as we said 
earlier, this topic intersects with a whole host 
of issues, including companies wanting to 
control their own destiny in the video space 
to a complex set of intellectual property 
issues. The HTML5 standards committee 
recognized this and decided not to specify 
the video format in the HTML5 specification. 
So, while in principle HTML5 supports (or is 
at least agnostic to) all of these formats, it 
is really up to the browser makers to decide 
what they do and don't support. 


Keep an eye on this topic if video is 
important to you; it will surely be an 
interesting one to watch over the next few 


years as this is all sorted out. And, as always, 
keep in mind what your audience needs and 
make sure you’re doing what you can to 
support them. 

If I want to encode my own video, 
where do I start? 

费 

• There are a variety of video capture 
and encoding programs out there, and which 
one you choose is really going to depend 
on what kind of video you’re capturing and 
how you want to use the end result. Entire 
books have been written on video encoding, 
so be prepared to enter a world of all new 
acronyms and technology. You can start 
simple with programs like iMovie or Adobe 
Premiere Elements, which include the ability 
to encode your video for the Web. If you’re 
getting into serious video work with Final 
Cut Pro or Adobe Premiere, these software 
programs include their own production tools. 


And, finally, if you are delivering your videos 
from a content delivery network (CDN), 
many CDN companies also offer encoding 
services. So you’ve got a wide variety of 
choices depending on your needs. 

Can I play my video back 
fullscreen? 

A- 

That functionality hasn’t yet been 
standardized, although you’ll find ways to do 
it with some of the browsers if you search 
the Web. Some of the browsers supply a 
fullscreen control (for instance, on tablets) 
that give the video element this capability. 
Also note that once you’ve got a way to go 
fullscreen, what you can do with the video, 
other than basic playback, may be limited 
for security reasons (just as it is with plug-in 
video solutions today). 
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falling back to flash video 


I think Flash video is still 
important, and I want to 
make sure I have a fallback 
if my users* browsers don’t 
support HTML5 video. 



No problem. 

There are techniques for falling back to another 
video player if your preferred one (whether that 
be HTML5 or Flash or another) isn’t supported. 

Below, you’ll find an example of how to insert 
your Flash video as a fallback for HTML5 video, 
assuming the browser doesn’t know how to play 
HTML5 video. Obviously, this is an area that 
is changing fast, so please take a look on the 
Web (which is updated a lot more often than a 
book) to make sure you’re using the latest and 
greatest techniques. You’ll also find ways to make 
HTML5 the fallback rather than Flash if you 
prefer to give Flash video priority. 


<video poster="video.jpg" controls> 
<source src= n video.mp4"> 
<source src= n video.webm n > 


<source src= n video.ogv n > 

<object>...</object> 

</video> 

f*ov Flasii video ； you need a” <objc^*t> element 
|^scv-i <objc6*t> msidc 

<vidco> bdov/ <SOUVtC> 

七 bvov/sev doesy / 七 ky\ov/ 3bou*t <vidco> 
element iKc <objcti> Will be used, youll 
see Plash video play'mj. 
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I just wanted to say nice job! The site is totally new and 
improved, and now we can do video anytime we need to. 
Umm, about that Tweet Sip cup_"wdl, if you watched the 
video, then I guess you know were back to the drawing 
board. But don’t worry—were already working on a new 
coffee mug with social networking, gamification, digital 
scrapbooking, auto-checkin, and analytics built right in! 
This one is going to be a winner, I promise! 


Would you believe we’re 「 ppiIIw i + 

iiipiii 


w - ipi. 

S Ssl a ZZ2 d t to e ca C0Pe ° fthiS 

1 .400-page book), a _d a 

after youVe finished" 

this book, pick up 
Head First HTML5 
Programming (by 
your all-time favorite 
Head First authors, 
of course), and take 
this all to the next 
level. 


mm 

m Si 


ORBtUY 1 
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a taste of other new elements 


Element 


SoU]^ 


<progress> 

K 

Need "to show pvo^css J 
oy\ a -task? Like °[0% ^ 

done? Use "tills clcmCK\"t. 


<section 〉 

Use "tVus clcw'C^'t "to dc-Vmc 
-tv>c majov scdlio^s o( your 
diodumC»>"t- 


Usc ^ clc^i 4v 

to ^ aside 4or, 
仏 e 州心 tomte^i, like a 
sidebav- oir a pull^uoic. 

〈 aside 〉 


Ths clcmc^-b is (or 

brts o-f h\^osi as 500a as 

-t^a-b mk W 吵 1—W! 




<headeir> 






<footer> 

0 TWis clewed dc-f 'mcs i\\t 
^ooitr o( a scdl'ion ov a 
y/hole dodumcr\*t- 

<^©t©r> 

di* 〜一 4 “ 
outside? Hoi! 


Use "tliis -for sections y/i-tli 
Keadevs, or -t^c deader o-f 
■tlic y/Kolc dodumewt- 


l/Va^-t a video m youv pa^c? 
You K\ccd "this elemCKrt. 



4S 




o> 


Usc -tv>'«s -for mtludm^ 
sou^d 60 朽七 cr\ 七 ’m 
your fa^c- 

TKc "tlwC clc»«c»'"t is 3 七 iw»e, 
a da*bc) ov- 3 da'tc—(like 
Ja^uavy 2 -lst a 七 2 -aw). 




<na^> 


Use -this clcmCK>-t {0 

[ ^voup -to^C"tKcv- links 
■tlia 七 av-c used -fov 
Ktavi^a'bion \v\ youv si-tc- 



.^cws avtidIcs ov blo^ pos-ts 

"tKa^t av-c scl-f-doh-ta'mcd 
doh-tc^-b. 

TW*s *s vAsed = 二 s d_ 


<c a 





This clcw»c^"t is "to dc-Pi^c scl-(•— 
doKrta'med do^-tc^-t like a plio-to, a 
dia^am ov cvcw a dode lis 七 — 


^^ as> 



1 


Here are a bunch of elements you 
know，and a few you don’t，that 
are all new in HTML5. 

Remember, half the fun of HTML 
is experimenting! So make 
some files of your own and try 

these out. 


■ 






1 
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BULLET POINTS - 

■ HTML5 added several new elements to 
HTML. 

■ <section>, 〈 article 〉， <aside>, <nav>, 
<header>, and <footer> are all new 
elements to help you structure your page, 
and add more meaning than if you use 
<div>. 

■ <section> is for grouping related content. 

■ <article> is for self-contained content 
like blog posts, forum posts, and news 
articles. 

■ <aside> is for content that is not central 
to the main content of the page, such as 
callouts and sidebars. 

■ <nav> is for grouping site navigation links. 

■ <header> groups content such as 
headings, logos, and bylines that typically 
go at the top of a page or section. 

■ <footer> groups content such as 
document information, legalese, and 
copyright that typically go at the bottom of 
a page or section. 

■ <time> is also a new element in HTML5. It 
is used to mark up times and dates. 


<div> is still used for structure. It is often 
used to group elements together for 
styling purposes or to create structure for 
content that doesn’t fit into one of the new 
structure-related elements in HTML5. 

Older browsers don’t support new HTML5 
elements, so be sure you know the 
browsers your primary audience will be 
using to access your web page, and don’t 
use the new elements until you’re sure 
they will work for your audience. 

<video> is a new HTML element for 
adding video to your page. 

A video codec is the encoding used to 
create the video file. Popular codecs 
include h.264, Vp8, and Theora. 

A video container file contains video, 
audio, and metadata. Popular container 
formats include MP4, OGG, and WebM. 

Provide multiple video source files to be 
sure your audience can view your video 
files in their browsers. 
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is your left brain working? 


HTMLcposs 

I y-v ■*/> ■*/> I ■•- /-N •^-'v -I- -WAT ■« y—v /-N k 


There are lots of new ideas and new elements in this chapter. Do the crossword 
to help make it all stick. All the answers come from the chapter. 



'國 


Across 

3. A_attribute is one that doesn’t have a specified 

value. 

6. The TweetSip cup measures coffee in_. 

7. The design of the Starbuzz page has a main content 


8. Specify a date in the_attribute of the <time> 

element. 

11. The_in the Starbuzz blog had the wrong style 

until we added the “top” class. 

12. A browser doesn’t know that <div id=“footer”> means 


13. Use_selectors in your CSS to make sure you 

don’t get unintended styling. 

14. The <section> element is used to group_ 

content. 


Down 

1. The Starbuzz CEO made a video about the_ 

cup. 

2. Browser makers can’t agree on video_. 

4. A section can have a header and a_. 

5. You’d probably use this element for a sidebar. 

9. Your local newspaper might use this kind of element to 
mark up its news articles. 

10. The_tag is used for specifying multiple video files. 

11. You can use a_at the top of the page, or at the 

top of a section or article. 
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html5 markup 


♦ 




命 






Sure, we could just tell you about the new HTML5 elements, but wouldn't it be more fun to figure 
them out? Below, you’ll find the new elements to the left (these aren't all the new elements, but 
you'll find the more important ones here); for each element, match it with its description to the right: 



Can contain a d^tte ox time ox both 

CQntsdm content mewnt for naVigcitlon links in 
the page. 

Used t9 add Video media t9 J/9ur page. 

Contentgoes sttthe bottQm Q^e page, or 
the bottom O? a section O? the page. 

Contains content ihctt is supplemental t9 th^ 
page content, like a Ccdlgut o\ sidebar. 

Contentgoes attlietQp page, outlie 
t9p 9? a section the page. 

A tKenicttic grouping contents ^typically 
with a Reader and possibly a footer. 

Represents a self-contained composition in 
a page, like a blog post, user fcmni post, qx 
newspaper article. 
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exercise solutions 






二 二? 二^^ 

BELOW (HINT, 


To«m«/ r 


BR0 ^ S vnnR BETUBN ， 卿 O 町 BAC , Qg a ,d h^ro\A d^tts - 
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HTMLcross Solution 
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13 tables ctnd more lists 


♦ Getting Tabular 考 



If it walks like a table and talks like a table... There comes a time 

in life when we have to deal with the dreaded tabular data. Whether you need to 
create a page representing your company’s inventory over the last year or a catalog 
of your vinylmation collection (don’t worry, we won’t tell), you know you need to do 
it in HTML, but how? Well, have we got a deal for you: order now, and in a single 
chapter well reveal the secrets that will allow you to put your very own data right 
inside HTML tables. But there’s more: with every order we’ll throw in our exclusive 
guide to styling HTML tables. And, if you act now, as a special bonus, we’ll throw in 
our guide to styling HTML lists. Don’t hesitate; call now! 
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something new from tony 


Hey guys, I just created this 
little table of the cities in my journal. 

I was going to put it on the website, but 
I couldn’t find a good way to do it with 
headings or blockquotes or paragraphs. 
Can you help? 




City 

Paic 

Tcm^cv-aiurc 

Aliiiudc 

Po^>ula*tioir> 

P'mcr Ra*t'm^ 

I/Valla l/Valla, WA 

JuhC 1 ^ 

7 弓 

\,%o\ (i 

1% t>9b 

午 /«5 

/^la^id Ci-ty, IP 

Juhc 2 ■弓 

7 午 

5312. (i 

■50 

vs 

Bouhti^ul, UT 

July \0 

°[\ 

午 ,Z2 ■“七 

^i, m 

十 

Las-t CKair>dc, CO 

July 

\OZ 

午 ,700 ft 

z 厶弓 


Cohsl^{uc!!dcs, KA1 

Au^us-t °{ 


午 ,2 ■午 Z 

7,2.01 

5/5 

I^Ky, hZ 

) 

Au^us-t 10 

\0\ 

9bO (i 

午 00 

V 5 
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tables and more lists 


How do you make tables with HTML? 

Tony’s right; you really haven’t seen a good way of using HTML to represent 
his table data, at least not yet. You do know there’s a way to use CSS and 
<div>s to create a table-like layout (with CSS table display), but that’s for layout 
(presentation) purposes, and isn’t related to the content itself. Here, we’ve got 
tabular data that we want to mark up with HTML. Luckily, HTML has a 〈 table 〉 
element to take care of marking up tabular data. Before we dive into the <table> 
element, let’s first get an idea of what goes into a table: 




"this \roy/ 
has Ke^dih^s. 


City 

Date 

Temp 

Altitude 

Population 

Diner 

Rating 

Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25th 

74 

5,312 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, GO 

^July 23rcf) 

102 

4,780 ft 

265 

3/5 

Truth or 

Consequences, 

NM 


93 

4,242 ft 

7,289 

5/5 

Why, AZ 

August 18th 

乂 104 

860 ft 

480 

3/5 



IA/e ta\\ \\ttt data a tell, 
ov* sometimes jus*t ^blc dBi^ ' 





If they put you in charge of HTML, how would you design one or more 
elements that could be used to specify a table, including headings, rows, 
columns, and the actual table data? 
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an html table 


Creating a table with HTML 

Before we pull out Tony’s site and start making changes, let’s get the table 
working like we want it in a separate HTML file. We’ve started the table and 
already entered the headings and the first three rows of the table into an HTML 
file called “table.html” in the “chapter 13/journal/’’ folder. Check it out: 






Bath <br> 
dcmCht -foVmS 
a -table vow 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= n utf-8 n > 

<style type= n text/css"> 

td, th {border : lpx solid black; 

</style> 

<title>Testing Tony * s Travels</title> 
</head> 

<body> 

<table> 

<tr> 

<th>C ity</ th> 

<th>Date</th> 

<th>Temperature</th> 

<th>Altitude</th> 

<th>Population</th> 

<th>Diner Rating</th> 

</tr> 

<tr> 

<td>Walla Walla, WA<.,*td> 

<td>June 15th</td> 

<td>75</td> 

<td>l,204 ft</td> 

<td>2 9, 68 6</td> 

<td>4/5</td> 

</tr> 

<tr> 

<td>Magic City, ID</td> 

<td>June 25th</td> 

<td>74</td> 

<td>5,312 ft</td> 

<td>50</td> 

<td>3/5</td> 

</tr> 

</table> 

</body> 

</html> 









This is jusi a small bit o*f CSS 
SO WC tdiY\ see stvudtuvc o-f 
七 he table \y\ the birowscv. Dor/ 七 
wo\r\ry about this -fo\r rvow. 


I/Ve use a <-tablc> -tag bo sta\rt tKc table. 

^ v/c ^ a <V>- 


^ - <i^> eler,e,t .s a a 

Uohtt 侁 a 七七 k -table arc lisied 

look like 

mi#rt make up a tolumy\ \y\ iKc WTML, v/c avc 
adtually dc-f'mmj table ro>w. 

Look ai To^s lis-t b> see \\o^i iiis i^cad'mjs 

Hcirc's iKc sia\rt J the second vow, \NW\th is 
-fov- iKc t\bf WaWa l/Valla- 

<*td> clcmCht Holds ohC dell o-f the 

table, ar»d tacM dell makes a sepav-ate dolumh. 


AH *tKcsc <*td>s make up owe vow. 





Kcv-c^s ilic -tliiv-d 
\row. Agaih, the <-td> 
elements eadli Kold o^e 
piede o-f -table data. 


604 Chapter 13 







tables and more lists 


What the browser creates 

Let’s take a look at how the browser displays this HTML table. We’ll warn you now: 
this isn’t going to be the best-looking table, but it will look like a table. We’ll worry 
about how it looks shortly; for now ， let’s make sure you’ve got the basics down. 


how 七 he b\rowsc\r 

delays the table HTML. 



jot 七 Wee vo>ws -total, 




000 

卜 叫问 rn 


Testing Tony's Travels 
5 file:///chapterlB/journal/table.html 


City 

Date 

Temperature 

Altitude 

Population 

Diner Rating 

Walla Walla，WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25th 

74 

5,312 ft 

50^ 

3/5 


<*td> is ii 


.^ Bach 

i*ts ov/y\ tell... 

… and si% 6oluwms, jus 七 
4a 七⑽ <tK> is m a tell 

as v/cll- It looks like Vnt 


bvoy/sev displays licad'mjs 
•m bold by dc-fault. 


/a 



Finishing typing in the “Testing Tony’s Table” HTML from the previous page (we started 
it in “table.html”，but you need to finish it). Typing this in, while tedious, will help get the 
structure of the <table>, <tr>, <th>, and <td> tags in your head. When you finish, give it 
a quick test, and then add the remaining items from Tony’s table. Test that too. 
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tables up close 


</tr> 
… </tr> 
</tr> 
</tr> 
</tr> 

</tr> 


So, all table data 
七 ha 七 joes m a v-ov/ is 
nested upside <*bv> 
七 . 


cra>Augusr yrnc/ra> 


、 / table 〉 


TKc <td> dcmc^i doy\*ta'ms oir\c daia dell m youv- 
-tablc. Ii mus-t be msidc a -table v-o>w. 


/ 

TKc </tablc> tag 
ends iKe -table- 


TableS dissected 


You’ve seen four elements used to create a 
single table: <table> ， <tr>, <th>, and <td>. Let’s 
take a closer look at each one to see exactly 
what role it plays in the table. 



The <tablc> taj s-tav-ts i\\t v/V\olc 

od you v/a^ta tabic, start 




<table> 


TKc <iK> clcmc^i do^-tams oy\^ dell m *tKc Kcad'mj o-f 
youv "table. |*t must be ’msidk a "tsblc vow. 


<th>Date</th> 


nc 

a v-o>n 


< 


<tr> 

City 

Date 

Temp 

Altitude 

Population 

Diner 

Rating 

<tr> 

Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

<tr> 

Magic City，ID 

June 25th 

74 

5,312 ft 

50 

3/5 

<tr> 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

<tr> 

Last Chance, GO 

July 23rd 

102 

4,780 ft 

265 

3/5 

<tr> 

Truth or 

Consequences, 

NM 

August 9th 

93 

4,242 ft 

7,289 

5/5 

<tr> 

Why, AZ 

August 18th 

104 

860 ft 

480 

3/5 


EaA < bc > clem ⑶七 
sPCti-f »cs 3 tsblc V'ov/- 







.r 

1 
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tables and more lists 


tJiereiare no 。 

Dumb Questi9ns 


Why isn’t there a table column 
element? That seems pretty important. 

The designers of HTML decided to 
let you specify tables by row, rather than 
by column. But notice that by specifying 
each row’s <td> elements, you are implicitly 
specifying each column anyway. 

What happens if I have a row that 
doesn’t have enough elements? In other 
words, I’ve got fewer things than the 
number of columns in the table? 

The easiest way to deal with that is to 
just leave the content of the data cell empty; 
in other words, you write <td></td>. If you 
leave out the data cell, then the table won’t 
line up properly, so all the data cells have to 
be there, even if they are empty. 

What if I want my table headings to 
be down the left side of the table, instead 
of across the top; can I do that? 

Yes, you certainly can. You just need 
to put your table heading elements in each 
row instead of all in the first row. If your <th> 
element is the first item in each row, then the 
first column will consist of all table headings. 

My friend showed me a cool trick 
where he did all his page layout right 
within a table. He didn’t even have to use 
CSS! 

Go straight to CSS jail. Do not pass 
go; do not collect $200. 

Using tables for layout was commonly done 
in the HTML era before CSS, when, frankly, 
there was no better way to do complex 
layouts. However, it is a poor way to do 


your layouts today. Using tables for layout 
is notoriously hard to get right and difficult 
to maintain. Instead, it’s much better to 
use CSS table display to get the benefits 
of a table layout without actually creating 
an HTML table (this is how we styled the 
Starbuzz page in Chapter 11). Tell your 
friend that his technique is old school, and 
he needs to get up to speed with the right 
way to do layout: CSS with HTML. 

Isn’t a table all about presentation? 
What happened to presentation versus 
structure? 

Not really. With tables, you are 
specifying the relationships between tabular 
data items. Well use CSS to alter the 
presentation of the table. 

How do HTML tables relate to CSS 
table display? 

HTML tables allow you to specify 
the structure of a table using markup while 
CSS table display gives you a way to 
display block-level elements in a table-like 
presentation. Think about it this way, when 
you really need to create tabular data in your 
page, use tables (and we'll see how to style 
these in a bit); however, when you just need 
to make use of a table-like presentation with 
other types of content, then you can use a 
CSS table display layout. 

Can we use CSS table display to 
style HTML tables? 

Well, you don’t really need to. Why? 
Because you’re already creating a tabular 
structure with HTML, so, as you’ll see, 
you can use simple CSS to style the table 
however you like. 


Tallies give you a way 
to specify tabular data 

in your HTML 

Tables consist oi data 
cells witkin rows* 
Columns are implicitly 
cteiined witkin tke 
rows. 

Tke nurnter oi 
columns in your table 
will te tke numter oi 
data cells you kave in 
a row. 

In general, tatles are 
not meant to te used 
lor presentation; tliat’s 

tke jot of CSS. 
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testing you on tables 


<tableXtrXth>Artis t</th> 

<th>Album</thX/trXtr> 

<td>Enigma</1dXtd>Le Roi Est Mort 
Vive Le Roi ! </tdX/tr> <trXtd>LTJ 
Bukem</td> 

<td>Progression Sessions 6</td> 
</trXtr> 

<td>Timo Maas</td> 
<td>Pictures</tdX/trX/table> 


BE 

On the left, youll find the HTML 
for a table. Your job is to play like 
you’re Ae browser displaying the 

table. Afer you’ve done 
the exercise, look at the 
end of the ch^ter to 
See if you ^ot it 




Herts just 

-taWc rtTMt- 



£omeowe needs -to leav^ 
Ko>w *to -fovmdt HTML-. 


aeo Untitled 

I : : I ? 目 +1 e 


如 table V^crc- 
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tables and more lists 


Adding a caption 

You can improve your table right off the bat by adding a caption. 


<table> 

<caption> 

The cities 工 visited on my 
Segway'n USA travels 

〈 /caption 〉 

<tr> 

<th>Cit y</th> 

<th>Date</th> 

<th>Temperature</th> 

<th>Altitude</th> 

<th>Population</th> 

<th>Diner Rating</th> 

</tr> 

<tr> 

<td>Walla Walla, WA</td> 

<td>June 15th</td> 
<td>75</td> 

<td>l,204 ft</td> 

<td>29, 68 6</td> 

<td>4/5</td> 

</tr> 

<tr> 

<td>Magic City, ID</td> 
<td>June 25th</td> 
<td>74</td> 

<td>5,312 ft</td> 

<td>50</td> 

<td>3 / 5</td> 

</tr> 



The daftioh is displayed \y\ iKc 
b\roy/sc\r. By dc-fauli, most bvov/sevs 
display iKis above ihc table. 



l-f you doh i like iKc dc-fault lodaiio^ o( 
iKc you tav\ use CSS -bo v-cposiiion 

\i (v/cll give Ua-t a iv-y m a scd). 

•m m'md iKa*t oldcv- bv-ov/sev-s don’ 七 -fully 
sup^>ov-t v-cposi*tior\'mg 灼 . 



You should always pui tKc dafiion at tKc 
o( youv -table \y\ *tKc HTML, and use 
bo v-eposi-tion i*t "to *tKc bo-tiom, i-f 
iKaVs v/Kcv-c you v/an 七 i 七 . 


〈 /table 〉 


〆 ~^ TV.C vest ^ taWc 

voy/s V>cv"C* 
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checking out the unstyled table 


Test drivG...awd start thinking about style 


Add the caption to your table. Save and reload. 



City 

Date 

Temperature 

Altituile 

Population 

Diner Rating 

Walla Walla, WA 

June 1 5th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25 th 

74 

5,312ft 

50 

3/5 

Bountiful, UT 

July 10 th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, CO 

July 23rd 

102 

4,780 ft 

265 

3/5 

Truth or Consequences, NM 

August 9 th 

93 

4,242 ft 

7289 

5/5 

Why，AZ 

August 18th 

104 

860 ft 

480 

3/5 


lA/c vcally *to add some padd'mj 
-to iiic table daia del Is, *to make 
iiicm casicv bo vead... 





...and a splash o-f ov-a^jc *to 
maitii lo^ys siic dould v-cally 
^>ull i\\t v/\iolc 


..and *tKc bovdev- I'mcs av-c v-cally w licavy w visually. 
iVc dould use mudii w |i^i*tcV" W bovdev-s in 七 he 
-table dells, altKoujK i*t would be nidc h> Kdve a 
davk bovdiev- avound *tKc y/Kolc *tablc... 
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tables and more lists 


Peforc wg start styliwg, lef s get the table 
iwto Towy's page 

Before we start adding style to Tony’s new table, we should really get the table 
into his main page. Remember that Tony’s main page already has set a font- 
family, font-size, and other styles that the table is going to inherit. So without 
putting the table into his page, we won’t really know what the table looks like. 

Start by opening “journal.html’’ in the “chapter 13/journal” folder, locate the 
August 20th entry, and make the following changes. When you’ve finished, 
move on to the next page before reloading. 


<h2>August 20, 2012</h2> 

<p> 

<img src= n images/segway2. jpg" alt= n Me and my Segway in New Mexico n > 
</p> 


<p> 

Well , 工 made it 1200 miles already, and 工 passed through some interesting 
places on the way : 

</p> 


<ol> 

- <li>Walla Walla, WA</li> 

- <li>Magic City, ~~ID</li> 

- <li>Dountiful, ~UT</li> 

- <li>Last Chance, ~ CO</li> 

- <li>Truth or Consequences, 

- <li>Why, AZ</li> 

</ol> 



NM</li> 


This is 七 lie old list 
di*tics. Delete 七 liis 
bcdausc wcVc v-cpladmj 
it with -tKc table. 


<table> 

<caption>The cities 工 visited on my Segway 1 n USA travels</ caption> 
<tr> 

<th>City</th> 

<th>Date</th> 

<th>Temperature</th> 


<th>Altitude</th> 

<th>Population</th> 
<th>Diner Rating</th> 

</tr> 


Tlic new -tabic joes hcvc. Copying and pasting i-t -fvom 七 he 
previous -file is 七 lie easiest way -to ge 七 i 七 hcvc. 



</table> 
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tables and style 


Now let's style the table 

Add the new style highlighted below at the bottom of the “journal.css” 
stylesheet file. 


@font-face { 

font-family : "Emblema One"; 

sre : url("http : //wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff") 
url("http : //wickedlysmart.com/hfhtmlc s s / chapter8 / j ournal/EmblemaOne-Regular.ttf’▼); 


body { 

font-family: 
font-size : 

} 

hi, h2 { 
color : 

border-bottom : 

} 

hi { 

font-family: 
font-size : 

} 

h2 { 

font-size : 
font-weight : 


Verdana, Geneva, Arial, 
small; 


sans-serif 


#cc6600; 

thin dotted #888888; 


"Emblema One 
220 %; 


130%; 

normal 


sans-serif 




/\ 七七 ^ *tof Kcv-c is all 七 lie style tKats 
duvven 七 ly in Tonyas y/cb pay. iVc 
added all iliis in CKaftcv 1/VcVc 
going *to add 七 he now style -fov 七 he 
tables below it 


blockquote { 
font-style : 


italic 


table { 

margin-left: 2Opx; 
margin-right : 2 Opx; 
border : thin solid black 
caption-side : bottom; 




Pivs 七， y/c’ll style 七 lie table. WicVc going bo add d mavjm oy\ 
七 lie Ic-ft and vigii 七 ， and a 七 iVm, bladk bovdev b> table. 


f^r\d y/c’vc going *to move 七 ha 七 da^tion 
\x> 七 lie bo*t*tom o ( 七 lie table. 


td, th { 

border : thin dotted gray; 
padding : 5px; 

} ^ - 


caption { 

font-style : italic; 
padding-top : 8px; 


Lets also tKanjc tKc bov-dev- oy» -tKc table data tt\U *to be a 
mudli lijliicv, doiicd bovdev- m jv-ay. 

lei's add some paddi'mj bo i\\t daia dells so here's some 
Spade bc*t>wccir» dd'td bovdcV- 


— ^sTKis vulc styles da^tion. WieVe dKangmg 

•foirt-s 七 ylc *to italid some -top f>add['m^ 
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tables and more lists 


Taking the styled tables for a test drive 

That’s a lot of changes at once. Make sure you save them, and you should 
validate as well. Then load “journal.html” into your browser. 


TKc table looks ^ui*tc 

於 ov/ 七 hat you vc 

styled ii- IA/cVc also 
a -(row styles iKai >wcv-c 
alreddy m Tor^ l s jouv-^al- 




All 七 k WU avc sa^s-sevi-f 
a^d a smallcv- s'i«. Wic 庐 6 ked 
佚 a 七叶 ^cvious styles 

alvcady *tV\c -file- 


(Vow jot a da\rk bo\rdc\r 
awd do 七七 ed I’mes. 

/ \ n a y/c VC y-t some maqm on 
be table ad some \>add'm5 m 
ed6i^ -table tt\l 


TKosc doiicd I'mcs avc look'mj 
vcally busy a^d distvadtmj, 

iKoujK. It docs^i ^t\y iKa*t 

av-c du^lidaiedi bciv/cc^ paiv- 
o( -table dells. 




① My Trip Around the USA on 




O A O file:///chapterl3/journal/journal.html 


» 


Sec|irci|| v fi VSA 


Documenting my trip around the US on my very own Segway! 

August 20,2012 



Well I made it 1200 miles already, and I passed through some interesting places on the way: 



f> City 

Date 

Temperature 

Altitude 

Population 

Diner | 
Rating 

| Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

|4/5 

^lagic City, ID 

June 25th 

74 

5,312 ft 

50 

3/5 

1 Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, CO 

July 23rd 

I 102 

4,780 ft 

265 

3/5 

Truth or Consequences, 

1 NM 

August 
: 9th 

93 

4,242 ft 

7,289 

5/5 


August 

18th 

| 104 

860 ft 

480 

3/5 


The cities I visited on my Segway'n USA travels 

July 14, 2012 

I saw some Burma Shave style signs on the side of the road today: 

Passing cars, 

When you can't see, 

May get you, 

A glimpse, 

Of eternity. 

I definitely won't be passing any cars. 

m b_ 奶如七 ‘ 七崎饮七扳 ^? t，0 ^ s '； dc 
切 ，如 6a f t.on will st，ll be al tV.c ^ iablc- 
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cells and the box model 


Table cells look like they just 
use the box model too...they ve 
got padding and a border. Do they 
also have a margin? 




Table cells do have padding and a border—just like 
you’ve seen in the box model — but they are a little 
different when it comes to margins. 

The box model is a good way to think about table cells, but they do 
differ when it comes to margins. Let’s take a look at one of the cells 
in Tony’s table: 


do 灼七⑶七 . 



/W Kcv-c ； s 


This is 


just like 

bov-dcv-s^at'mj ’ 
pvo^>cv*ty >wc used m 
iKc -table display 
layout -fov- £iav-buzi. 


So instead of a margin, we have a border-spacing property, which 
is defined over the entire table. In other words, you can’t set the 
“margin” of an individual table cell; rather, you set a common spacing 
around all cells. 
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tables and more lists 


^harpen your pencil 


The double dotted lines are giving Tony’s table a busy and distracting look. 
It would be much better, and wouldn’t detract from the table, if we could 
just have one border around each table cell. Can you think of a way to do 
that with styling given what you’ve just learned? Give it a try and check 
your answer in the back of the chapter. 




ihereictre no o 

Dumb Questi9ns 


You said border spacing is defined 
for the entire table, so I can’t set a margin 
for an individual table cell? 

Right. Table cells don’t have margins; 
what they have is spacing around their 
borders, and this spacing is set for the entire 
table. You can’t control the border spacing of 
each table cell separately. 


Well, is there any way to have 
different border spacing on the vertical 
than I have on the horizontal? That seems 
useful. 

You sure can. You can specify your 
border spacing like this: 

border-spacing : lOpx 30px; 

That sets 10 pixels of horizontal border 
space and 30 pixels of vertical border space. 


The border-spacing property 
doesn’t seem to work in my browser. 

Are you using an old version of 
Internet Explorer? We're sorry to report that 
IE version 6 doesn’t support border-spacing. 
But seriously, isn’t it time you upgraded your 
browser? 
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dealing with table borders 


fretting those borders to collapse 


There is another way to solve the border dilemma, besides the 
border-spacing property. You can use a CSS property called 
border-collapse to collapse the borders so that there is no border 
spacing at all. When you do this, your browser will ignore any border 
spacing you have set on the table. It will also combine two borders 
that are right next to each other into one border. This “collapses” two 
borders into one. 


Here’s how you can set the border-col lapse property. Follow along 
and make this change in your “journal.css” file: 


table { 

margin-left: 2Opx; 
margin-right : 2 Opx; 
border : thin solid black; 
caption-side : bottom; 
border-collapse : collapse; 


Add a border - 6 ol lapse property 
and set i*ts value bo w dollapsc w . 




Save the file and reload; then check out the 
changes in the border. 



jl ^ u 1 ■ rc 

1 


5,312 ft 



_ 

J 


|s/ov/ you just Kave o^c single bov-dev- 
around all iKe -table dells. Just v/Kai 
v/e v/dhied, do^i you ajv-cc iKai 
looks mudK y\ov/? 


« o o 


My Trip Around the USA o 


v — > 


C ft O flle:///chapterl3/Journal/Journal.html 


Scffwuy'n VSA 


Documenting my trip around the US on my very own Segway! 

August 20, 2012 


Well I made it 1200 miles alrcbs^*. and I passed through some interesting places on the way: 


City 

Date 气 

S^mpcraturc 

Altitude 

Population 

Diner 

Rating 

Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25th 

74 、 

5,312 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, CO 

July 23rd 

102 

4,780 rt 

265 

3/5 

Truth or Consequences, 
NM 

August 

9th 

93 

4,242 ft 

7,289 

5/5 

Why, AZ 

August 

18th 

104 

860 ft 

i80 

3/5 


Thp 1 vMtfid nn my USA travfil<i 

July 14, 2012 

I saw some Burma Shave style signs on the side of the rood today : 

Passing c^rs, 

When you can't see, 

Moy get you, 

A glimpse. 

Of eternity. 

I definitely won't be passing any cars. 
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tables and more lists 


Sharpen your pencil 


You’re becoming quite the pro at HTML and CSS, so we don’t mind giving you a 
little more to play with in these exercises. How about this: we’d like to spruce this 
table up even a little more, starting with some text alignment issues. Let’s say we 
want the date, temperature, and diner rating to be center-aligned. And how about 
right alignment on the altitude and population? How would you do that? 


Here’s a hint: create two classes, one for center-aligned and one for right-aligned. 
Then just use the text-align property in each. Finally, add the appropriate class to 
the correct <td> elements. 


This may sound tough, but take it step by step; you already know everything you 
need to finish this one. And, of course, you can find the answer in the back of the 
chapter, but give yourself the time to solve it before you peek. 



TV^csc a^rc all 


these a\rc v-igK-t-alijhcd. 
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coloring cells 


How about some color? 


You know Tony loves his signature color and there’s no reason not 
to add a splash of orange to his table; not only will it look great, 
but we can actually improve the readability of the table by adding 
some color. Just like for any other element, all you need to do is 
set the background-color property on a table cell to change its 
color (notice how everything you’ve learned about HTML and 
CSS is starting to come together!). Here’s how you do that: 

th { 

background-color : #cc6600; 


Add this new rule to your “journal.css” file and reload. 
Here’s what you’ll see: - 


How about some color m the 
table rows? 



So far, the color is looking pretty nice. Let’s take it to the 
next level. A common way to color tables is to give rows an 
alternating color, which allows you to more easily see each 
row without getting confused about which column goes 
with which row. Check it out: 

Difficult to do in CSS? Nope. Here’s how you can do this. 
First define a new class — let’s call it “cellcolor ”： 

.cellcolor { 

background-color : #fcba7a; 

} 

and then add this class attribute to each row you’d like 
to color. So in this case, you find the <tr> opening 
tags for Magic City, Last Chance, and Why, and add 
class= M cellcolor " to each one. 




Your turn. Add the class “cellcolor” to your 
CSS in "journal.css", and then, in your 
HTML, add class=“cellcolor” to each of the 
<tr> opening tags needed to make the rows 
alternating colors. Check your answers 
before moving on. 
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tables and more lists 


Some Serious CSS - 

Want to see another, more advanced way to add color to every other row of a table? It’s called the nth-child 
pseudo-class. Remember, pseudo-classes are used to style elements based on their state (like the a：hover 
pseudo-class we used in Head First Lounge, which styles a link if the user is hovering the mouse over the link). 

For the nth-child pseudo-class, that state is the numerical order of an element in relation to its sibling elements. 
Let’s look at an example of what that means: 

广 ~ ttcvc, y/c have -fou\r pav-ajv-afhs nested m a <scdtioh> 
clement Eadli famagirafh is a “dWd" o*f the <scd*tioh>. 



This is 七 lie "first diiild... 
..tKis is ilic sedond dhild... 


… 七 he 七 Wnrdl AildL. 


...a^di 七 his is 七 lie -fouirtK tW\\d- 


Let’s say you want to select the even paragraphs (that is, paragraphs 2 and 4) so they have a red 
background color, and the odd paragraphs so they have a green background color. You do that like this: 

p : nth-chiId(even) { 

background-color : red; ^ - PavayaAs 2 - T Will be … 

} 

p : nth-child(odd) { ^ 

background-color : green ; and I dhd 3 will be 

} 

As you might guess from the name "nth-child", this pseudo-class is even more flexible 
than just selecting odd and even items nested in an element. You can also specify simple 
expressions that use the number n to give you a wide variety of options in selecting elements. 

For instance, you can also select the even and odd paragraphs like this: <^ction> 

、 Sclct-ts even - 

p: nth-child ( 2 n) { nU mbc^rcdi <\»s 

background-color : red; 

} ^ Sclcdts odd - 

p: nth-child ( 2 n+l) { mn \)trtd <\»s 

background-color : green; 


|-f y \^- 0 , 七 he 灼 Zyv—0 (y\o 

is I, 

is i\\t -fiv-st fav-ajv-a^. 

l-f 竹二 I， "tlicrv Zh—Z ； -the sedohd 

fav-agmafh, av\d Zn+I 二冬 , 

七 hi\rd pav-agv-afli. 
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testing nth-child pseudo-classes 



4 Serious E^Tcise 


Why don’t you try your hand using the nth-child pseudo-class? 
Complete the CSS rule below using the nth-child pseudo-class 
to color the odd rows light orange. 

youv* pseudo—tldss 
sclctiov- iicv-c- 

tr: { 


background-color : #fcba7a 


ou"t youV* •dclltolov dl3ss like 七 Wis. 


/* .cellcolor { 

background-color : #fcba7a 


* 


If you want to try this for real, first comment out your .cellcolor 
class so it doesn’t take effect anymore. Next, place the new 
tr pseudo-class rule above the rule for setting the background 
color of the <th> row (so the <th> row stays dark orange). Make 
sure you’re using a modern browser (IE9+!), and reload the 
page. Did it work? Go ahead and remove this new rule, and 
uncomment the .cellcolor rule before moving on. 



Roy/s I, a^d 1 all a batkjrou^d 

dolov. Bu-t <rulc v/ill ov/c^ride 仏 e rule 

七 “odd” roY/s, so \i W\W stay dark o^ra^jc. 


I?(d we mention that Towy made 
an iwtGrGstmg discovery iw Truth 
or Consequences, New Mexico? 

It’s fair to say Tony found something interesting 
about Truth or Consequences, New Mexico; in 
fact, he found her so interesting that after going to 
Arizona, he turned around and came right back. 


We’re glad for Tony, but he’s really given us a 
conundrum with the table. While we could just add 
a new row for Truth or Consequences, we’d really 
like to do it in a more elegant way. What are we 
talking about? Look on the next page to find out. 
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tables and more lists 



City 

Daic 

Tcmpcra-tuvc 

Altitude 


D'mcv* 

WaWa Walla, WA 

JuhC 

7*5 

l,lo^r n 

n 娜 

午 / 弓 

Mayt City, IP 

Jur»c Z 弓 

7 午 

5312 - -fi 

^0 

vs 

Bounti-ful, UT 

July 10 

11 

^r.ZZt U 

午 i, m 

午 

Last 0\av\tt, CO 

July 23 

I 02 M 

千 30 耗 

us 


TVu'tK or 
Co»SC<\UCndCS, 

August °\ 

August Z7 


(i 

午 ,1 午 1 伋 

7,2-01 

7 潤 

午 5 

机 Y , AZ 

August IS 

10 午 

0to 

午 00 



Another look at Towy's table 

Based on his return trip to New Mexico, Tony’s added a new entry for August 27th, 
just below the original Truth or Consequences entry. He’s also reused a couple of 
cells where the information didn’t change (a great technique for reducing the amount 
of information in a table). You can see that when he added the new row, all he 
needed to do was list the things that were different the second time around (the date, 
the temperature, and that he revisited the diner). 


ttcv-c av-c bo-tK 

Visits 

{p Tv-utVl OV 



City 

Date 

Temp 

Altitude 

Population 

Diner 

Rating 

Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25th 

74 

5,312 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, GO 

July 23rd 

102 

4,780 ft 

265 

3/5 

Truth or 

Consequences, 

NM 

August 9th 

93 

4,242 ft 

7,289 

: 

5/5 

August 27th 

98 

4/5 

Why, AZ ' 

^ August 18th 

104 

860 ft 


3/5 


These table daia dells 


But where does this leave you with HTML? It seems like you’d have to add an entirely span T WO \rows now. 

new row and just duplicate the city, altitude, and population, right? Well, not so fast. 

We have the technology.. .using HTML tables, you can have cells span more than 
one row (or more than one column). Let’s see how this works … 
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using table spans 


How to tell cells to span more thaw owe row 

What does it mean for a cell to span more than one row? Let’s look at the entries 
for Truth or Consequences, NM，in Tony’s table again. The data cells for city, 
altitude, and population span two rows, not one, while the date, temp, and diner 
rating span one row, which is the normal, default behavior for data cells. 


City 

Date 

Temp 

Altitude 

Population 

Diner 

Rating 

Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25 th 

74 

5,312 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, GO 

July 23rd 

102 

/UlLLnft 


3/5 

Truth or \ 

Consequences, i 
NM 

(_V 

August 9th 

93 

c: 

r: 

\ 5/5 

August 27th 

98 

) 4/5 

Why, AZ \ 

August 18th 

104 

/ 860^ 

480 

3/5 


TKcsc tells spa>rv *Uo Voy/s. 


tKc dale, temp, 

如 d dihcv va-tihj dells 
up jus*t 


ohC. 



So, how do you do that in HTML? It’s easier than you might think: you use the 
rowspan attribute to specify how many rows a table data cell should take up, and 
then remove the corresponding table data elements from the other rows that the cell 
spans over. Have a look — it’s easier to see than describe: 


<tr> 

<td rowspan="2">Truth or Consequences , 
<td class= n center M >August 9th</td> 

<td class= n center">93</td> 


NM</td> 


Hcvc av-c tKc b^o -table 
v-ov/s 七 ha 七 iKc Kom 


da*ta. 


<td rowspan="2 M class= n right n >4,242 ft</td> 
<td rowspan= M 2" class= n right n >7,289</td> 



<td class:’’center n >5/5</td> 

</tr> 

<tr> 

<td class="center M >August 27th</td> 
<td class= n center M >98</td> 


<td class= n center M >4/5</td> 
</tr> 




— —* 


TKc di 七 y is no 七 
needed bcdausc 
o-f 七 lie voy/span. 


altitude and 
population 


iKc daia dells iKai do" 七 
or\ iKc sedohd visii 
3l"ti*tudc ； 3hd population), y/e ddd 3 
\roy/spah ativ-ibuic iKai 

"tiie *tv/o \rows. 

TKcn \ y \ 七 lie sedond vow, wc 

spedi-fy jus 七 dolumns wc need 

(date, and a now vatmg). 
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tables and more lists 


♦ 








Just to make sure you’ve got this down, fill in each cell in the 
table with the data from the correct <td> table cell. We’ve 
done one for you to get you started. Check your answers 
before moving on. 


<tr> 

<td rowspan="2 M >Truth or Consequences , NM</td> 
<td class= n center">August 9th</td> 

<td class= n center">93</td> 

<td rowspan= n 2 n class= n right n >4,242 ft</td> 
<td rowspan= n 2" class= n right n >7,289</td> 

<td class= n center">5/5</td> 

</tr> 

<tr> 

<td class= n center">August 27th</td> 
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testing table spans 


Test drive the table 


Make the changes to the table in “journal, 
html” and give it a test run. Take a look at 
the table. Think about exactly what you’re 
doing to the table: you’re using HTML to 
specify that certain cells should take up 
more than one row，and to do that, you’re 
removing the <td>s they’re displacing. 


Noy/ y/c’vc 3 。七 a yea 七一 looking 
■table docsn ; *t Kavc any 
veduhdian-t m-fovmation in i*t 
dhd looks good hoof 







O My Trip Around the USA on 


C A O file:///chapterl3/journal/journal.html 


» 


Segwity'n VSA 


Documenting my trip around the US on my very own Segway! 

August 20, 2012 



Well I made it 1200 miles already, and I passed through some interesting places on the way: 


Altitude Population Diner Rating 


Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25th 

74 

5,312 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, CO 

July 23rd 

102 

4,780 ft 

265 

3/5 

Truth or Consequences, NM 

August 9th | 

93 

4,242 ft 

7,289 

5/5 

August 27th 

98 

4/S 

Why, AZ 

August 18th 

104 

860 ft 

480 

3/5 


The cities I visited on my Segway’n USA travels 

July 14, 2012 

I saw some Burma Shave style signs on the side of the road today: 

Passing cars, 

When you can’t see, 

May get you, 

A glimpse, 

Of eternity. 

I definitely wont be passing any cars. 


tliereiare no o 

Dumb Questions 


You said you can have table data 
span columns too? 

You sure can. Just add a colspan 
attribute to your <td> element and specify 
the number of columns. Unlike the rowspan, 
when you span columns, you remove table 
data elements that are in the same row 
(since you are spanning columns, not rows). 


Can I have a colspan and rowspan 
in the same <td>? 

You sure can. Just make sure you 
adjust the other <td>s in the table to account 
for both the row and column spans. In 
other words, you'll need to remove the 
corresponding number of <td>s from the 
same row, and from the column. 


Do you really think these rowspans 
look better? 

Well, they certainly reduce the amount 
of information in the table, which is usually a 
good thing. And, if you look at a few tables 
out there in the real world, you’ll find that 
rowspans and colspans are quite common, 
so it’s great to be able to do them in HTML. 
But if you liked the table better before, feel 
free to change your HTML and go back to 
the previous version. 
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tables and more lists 



Trouble m paradise? 

It looks like we’ve got a disagreement on the diner rating for August 
27th, and while we could ask Tony and Tess to come to a consensus, why 
should we? We’ve got tables, and we should be able to get another rating 
in there. But how? We don’t really want to add yet another entry just for 
Tess’s review. Hmmm.. .why don’t we do it like this? 


City 

Date 

Temp 

Altitude 

Population 

Diner 

Rating 

Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25 th 

74 

5,312 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, GO 

July 23rd 

102 

4,780 ft 

265 

3/5 

Truth or 

Consequences, 

NM 

August 9th 

93 

4,242 ft 

7,289 

5/5 

August 27th 

98 

Tess 5/5 

Tony 4/5 

Why, AZ 

August 18th 

104 

860 ft 

480 

3/5 


l/VV>y y\oi \)oi\\ v-atmjs 
m 4c -tabic? T\\ai >way, jci 



move 


ad.tuv-a*tc m-fov-matio 
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adding a nested table 



That’s because it is. But nested tables in 
HTML are straightforward. All you need 
to do is put another <table> element 
inside a <td>. How do you do that? You 
create a simple table to represent both 
Tony’s and Tess’s ratings together, and 
when you have that working, put it inside 
the table cell that now holds Tony’s 4/5 
rating. Let’s give it a try … 



<tr> 

<td rowspan= M 2 M >Truth or Consequences , NM</td> 
<td class= n center">August 9th</td> 

<td class= n center M >93</td> 

<td rowspan= n 2 M class= n right n >4,242 ft</td> 
<td rowspan= M 2 M class= n right n >7,289</td> 

<td class= n center">5/5</td> 

</tr> 

<tr> 


<td class= n center">August 27th</td> 
<td class= n center">98</td> 


<td> 

- 4/Ir- 夭 

<table> 

<tr> 

<th>Tes s</th> 

< td>5 / 5< / td> 
</tr> 

<tr> 

<th>Tony</th> 

< td>4 / 5< / td> 
</tr> 

</table> 

</td> 



Piv-st ； delete old vdtmj 

七 ha 七 v-cfv-cscy\icd To^s vatnr^ … 



...and pu 七 a table m its pladc. TKis -tabic Kolds 
*tv/o dmcv ortc -fov Tcss ok\c -fov 

Tony. !A/cVc us'mg -tabic Kcad'mjs -fov tKciv 
names, dhd da 七 a dells -fov 七 iiciv vatmgs. 


</tr> 
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tables and more lists 


Test driving the nested table 

Go ahead and type in the new table. Tables are easy to mistype, 
so make sure you validate and then reload your page. You 
should see the new, nested table. 


« O O 


My Trip Around the USA on 




O A I O file ： ///chapterl3/journal/journal.html 


» 


VSA 


Documenting my trip around the US on my very own Segway! 

August 20, 2012 



Well I made it 1200 miles already, and I passed through some interesting places on the way: 



Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25th 

74 

5,312 ft 

.i.i. 

50 

3/5 

Bountiful, UT 

July 10th 

91 

| 4,226 ft 1 

41,173 | 

4/5 

Last Chance, CO 

July 23rd 

102 

4,780 ft 

265 

3/5 


! August 9th 

93 



5/5 


Truth or Consequences, NM 



Woy/, looking hide- 
0ir\ly tKat badkgvoundi 
vedlly is a bit mudK 
-fov a hesied -tabic. 
Let’s keep 七 lie names 

bold, but take o(( 
tKc badk^round dolov. 
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testing what you know about tables 



It’s time to fall back on all that training you’ve done. What you need to do is 
change the table heading background color for just Tony and Tess, and do 
it without changing the background of the main table headings. How? You 
need to find a selector that selects only the nested table headings. 



7??e cities I visited o/? my Segway'n USA travels 


.广 

sclcd-tov -to sclcdt 
only 七 lie nested 
table Kcad'mj 
elements. 



Wic 的七七 o 七 he ba 匕 kyound dolov o( 



background-color : white; 


Stop! Pow't look 
at the next page 
uwtil yo\i do this 
exercise. 
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tables and more lists 


Overriding the CSS for the nested 
table headings 

You can target just the <th> elements in the nested table using 
a descendant selector. Add a new rule to your CSS that uses 
the “table table th” selector to change the background color of 
the nested table headers to white: 

table table th { 

background-color : white; 


Now save the changes to your “journal.css” file and reload. 


My Trip Around the USA on 


夺 C I O file:///chapterl3/journal/journal.html 


Sotjwtty'n VSA 


Ducumentiriy my trip druund the US on my very own Scywdy! 

August 20, 2012 



Well I mode it 1200 miles already, ond I passed through some interesting places on the way: 


Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

June 25th 

74 

5 # 3i2 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, CO 

July 23rd 

102 

4,780 ft 

265 

3/5 


Truth or Curibequcriceb, NM 


Thp citipn 1 my Spg\A/ny'n UfiA travpln 

July 14, 2012 

l saw some burma Shave style signs on/ te side of the road today: 

Passmg cars. 

When you can't see. 

May get you, 

A glimpse. 

Of eternity. 


Tess 

5/5 

Tony 

4/5 



Nov/ ihe <iK> ir» iKc 

nested table Kas a 
whiic ba^kjv-ouhd- 


But mUc \i st.ll V^as bold 
smdc >wc didn 七 

ovevVide "bV\a*t 切 ’ 



Dumb Quest? 


ons 


I used a class to solve the Brain 
Barbell. I created a class called "nestedtable” 
and assigned each table heading to it. Then 
I created a rule like this: 

.nestedtable { 

background-color : white; 


Is that an okay solution too? 

There are lots of different ways to solve 
problems using CSS, and certainly your 
solution is an effective and perfectly valid way 
to use CSS. We’ll just point out that by using 
the descendant selector instead, we didn’t have 
to make any changes to our HTML. What if 
Tony and Tess keep adding reviews for diners? 
Then for every review, you’d have to make 
sure and add the class to each <th>. With our 
solution, the styling happens automatically. 



You want Tony and Tess to 
have different background 
colors on their table rows; 
say, blue and pink. Can 
you think of several ways 
to do that? 
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adding a list to tony } s blog 


living Towy's site the final polish 

Tony’s page is really looking nice, but there’s one more area we haven’t spent 
any time styling yet: the list that contains the set of items he was preparing for 
his trip. You’ll find this list in his June 2nd entry; check it out below: 


lookihj ai just iKc ftT/WL 


Shippct -fvom -tKc Jur»C Zhd Ch"tvy. 


<h2>June 2, 2012</h2> 


<p> 

<img src="images/segwayl.jpg" 

alt= n The first day of the trip" /> 

</p> 


<p> 

My first day of the trip ! 工 can't 
believe 工 finally got everything 
packed and ready to go. Because 
I'm on a Segway , 工 wasn't able 
to bring a whole lot with me: 

</p> 

<ul> 

<li>cellphone</li> 

<li>iPod</li> 

<li>digital camera</li> 

<li>a protein bar</li> 


</ul> 

<P> 

Just the essentials. As Lao Tzu 
would have said, <q>A journey of 
a thousand miles begins with 
one Segway.</q> 

</p> 

</body> 

</html> 


y/iiai list looks like 


七 he bottom of Tor^j s jouvv\3lj 
list m his -f ivst journal cv^iv-y? 
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tables and more lists 


living the list some style 

You already know that once you know the basic CSS font, text, color, and other 
properties, you can style just about anything, including lists. You’ve already seen a little 
list styling (Chapter 12), and it turns out there are only a couple properties that are 
specific to lists, so there’s not too much more to learn. The main list property is called 
list-style-type, and it allows you to control the bullets (or markers^ as they are 
called) used in your lists. Here are a few ways you can do that: 



li 


Hcv-c v/cVc scitmj iiic style oy\ iiic <li> 士你 ⑶七 .also set it 
oy \ iKc <ul> 士 m ⑶七 , ad i 七 v/ill be by <\\> 


list-style-type : disc; 


t)\st is -the dc-Paul-fe 

眯 airkev* * type. 



0 0 0 Tony's List of Essentials 

’ file:///chapterl3/joumal/essentials.html 


Tony's List of Essentials 

• cellphone 

• iPod 

• digital camera 

• a protein bar 


li { 

list-style-type : circle; 



The di\rdlc v-*ty value jives 
you a simple di\rdlc rwa\rkcv-. 


eee Tony's List of Essentials 

: file:///chapter 13/journal/essentials.html 


Tony's List of Essentials 

o cellphone 
o iPod 

o digital camera 
o a protein bar 


A 


li { 

list-style-type : square; 

} 

s^uamc jives you a 
s^uav-c mairkcv-. 



0 0 0 Tony's List of Essentials 

’ file:///chapter 13/journal/essentials.html 


Tony's List of Essentials 

■ cellphone 

■ iPod 

■ digital camera 

■ a protein bar 


0 0 0 Tony's List of Essentials 

: file:///chapterl3/journal/essentials.html 


li { 

list-style-type : none 



f\ value y\ov\t 
removes mavkev- 
al-toytV\cv-. 


Tony's List of Essentials 


cellphone 


iPod 


digital camera 


a protein bar 
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creating a custom list marker 


What if you wawta custom marker? 

Do you really think Tony would want anything less than his 
own custom marker? Well, luckily CSS has a property called 
list-style-image that lets you set an image to be the 
marker for a list. Let’s give it a try on Tony’s list: 

Wtrts tKc “s 七- st ★-••州， fropev 切， 
WiA v/cVc settmj -to 3 URU 


li 


list-style-image : url(images/backpack.gif); 
padding-top : 5px; 
margin-left: 2Opx; 




SomC m3V^nr> *to 3(id 
on i\^t \t(i list \itms, 

and also a little -to? ^addma -to ^ 
tat\\ list item a bit o( ^cadv-oom. 



"Ue “ay w ba 々 a ㈣ is a 
small vcvs'io^ o( 七 his 
Seems dotsr!i it? A^d 

•m "To^ys siy»a*tuve to\or, *too- 


Awd, the final test drive... 

This is it: your last change to Tony’s 
site. Add the rule for the list item to your 
CSS and then reload. 


ftcv-c s -feKc lis-t wi-feK -tKc rvtdv-kev 
^\aud wi-tK i^ajc a^d some 

以七⑸ a^d paddihj 
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tables and more lists 


there j are nQ ^ 

Dumb Questi9ns 


What about ordered lists? 
What can I do to change their style? 

You style ordered and 
unordered lists in the same way. 

Of course, an ordered list has a 
sequence of numbers or letters for 
markers, not bullets. Using CSS, you 
can control whether an ordered list’s 
markers are decimal numbers, roman 
numerals, or alphabetic letters (like a, 
b, c) with the list-style-type property. 
Common values are decimal, upper- 
alpha, lower-alpha, upper-roman, and 
lower-roman. Consult a CSS reference 
for more options (there are many). 


How can I control the text 
wrap on lists? In other words, how 
can I control whether text wraps 
underneath the marker or just 
underneath the text? 

There’s a property called 
list-style-position. If you set this 
property to “inside”, then your text will 
wrap under the marker. If you set it to 
“outside”, then it will wrap just under 
the text above it. 


Are you sure that’s right? 
That seems backward. 

Yes, and here’s what inside and 
outside really mean: if you set your 
line-style-position to “inside”，then the 
marker is inside your list item and so 
text will wrap under it. If you set it to 
“outside”, then the marker is outside 
your list item and so text will just wrap 
under itself. And by “inside your item," 
we mean inside the border of the list 
item’s box. 


Wow, who would have known 
we could take my site this far 
when we started? 

Were going to get Jess a Segway of 
her own so she can go with me on the 
rest of my Segway n USA trip. See 
ya somewhere...and we II BOTH be 
updating the web page. Thanks 
for everything! 
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review of tables and lists 


BULLET POINTS - 

■ HTML tables are used to structure tabular data. 

■ Use the HTML table elements <table>, <tr>, 
<th>, and <td> together to create a table. 

■ The <table> element defines and surrounds 
the entire table. 

■ Tables are defined in rows, using the <tr> 
element. 

■ Each row contains one or more data cells, 
defined with the <td> element. 

■ Use the <th> element for data cells that are 
row or column headings. 

■ Tables are laid out in a grid. Each row 
corresponds to a <tr>...</tr> row in your 
HTML, and each column corresponds to the 
<td>...</td> content within the rows. 

■ You can provide additional information about 
your tables with the <caption> element. 

■ Tables have border-spacing, which is the 
space between cells. 

■ Table data cells can also have padding and 
borders. 

■ Just like you can control the padding, borders, 
and margins of elements, you can control the 
padding, borders, and border-spacing of table 
cells with CSS. 

■ border-collapse is a special CSS property for 
tables that allows you to combine cell borders 
into one border for a cleaner look. 

■ You can change the alignment of the data 
in your table cells with the text-align and 
vertical-align CSS properties. 


■ You can add color to your tables with the 
background-color property. Background color 
can be added to the entire table, to each row, 
or to a single data cell. 

■ Use the CSS nth-child pseudo-class to add 
background color to every other row of a table. 

■ If you have no data for a data cell, put no 
content into the <td> element. You need to 
use a <td>...</td> element to maintain the 
alignment of the table, however. 

■ If your data cell needs to span multiple rows or 
columns, you can use the rowspan or colspan 
attributes of the <td> element. 

■ You can nest tables within tables by placing 
the <table> element and all its content inside a 
data cell. 

■ Tables should be used for tabular data, not for 
laying out your pages. Use CSS table display 
to create multicolumn page layouts as we 
described in Chapter 11. 

■ Lists can be styled with CSS just like any other 
element. There are a few CSS properties 
specific to lists, such as list-style-type and 
list-style-image. 

■ list-style-type allows you to change the type of 
the marker used in your list. 

■ list-style-image allows you to specify an image 
for your list marker. 
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HTMLcross 

That crossword looks a bit like a table, doesn’t it? Give your left brain a 
workout and solve this crossword. All the words are from this chapter. 



Across 

1. Used to control whether the marker is inside or outside the 
list items border. 

4. What a data cell does when it uses more than one row or 
column. 

7. Default position of the caption. 

8. Used to merge borders. 

9. Use this property to use an image instead of a built-in 
marker in your lists. 

10. Area between borders. 

13. Adds a short description that is displayed with the table. 

14. You specify HTML tables by_, not columns. 

15. We call bullets a type of list_. 


Down 

1. Use this property to change your list marker. 

2. Don’t use tables for this. 

3. list-item-position can be used to control the behavior of 

text_. 

5. Table cells have padding and borders, but no_. 

6. <th> is used for these. 

11. <td> is for this. 

12. One table inside another is called 
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exercise solutions 



First, type in the 
“Testing Tony’s Table” 
HTML. Typing this 
in, while tedious, 
will help get the 
structure of the 
<table>, <tr>, <th> 
and <td> tags in 
your head. When 
you finish, give it a 
quick test, and then 
add the remaining 
items from Tony’s 
table. Test that too. 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset= M utf-8 M > 

<style type="text/cs s M > 

td, th {border : lpx solid black;} 

</style> 

<title>Testing Tony's Table</title> 

</head> 

<body> 

<table> 

<tr> 

<th>City</th> 

<th>Date</th> 

<th>Temperature</th> 

<th>Altitude</th> 

<th>Population</th> 

<th>Diner Rating</th> 

</tr> 

<tr> 

<td>Walla Walla, WA</td> 

<td>June 15th</td> 

<td>75</td> 

<td>l,204 ft</td> 

<td>29, 68 6</td> 

<td>4 / 5</td> 

</tr> 

<tr> 

<td>Magic City, ID</td> 

<td>June 25th</td> 

<td>74</td> 

<td>5,312 ft</td> 

<td>50</td> 

<td>3 / 5</td> 

</tr> 

<tr> 

<td>Bountiful, UT</td> 

<td>July 10th</td> 

<td>91</td> 

<td>4,226 ft</td> 

<td>41,173</td> 

<td>4/5</td> 

</tr> 

<tr> 

<td>Last Chance, CO</td> 
<td>July 23rd</td> 

<td>102</td> 

<td>4,780 ft</td> 

<td>265</td> 

<td>3/5</td> 

</tr> 


Coh-tihucs ovcir -fcKc pdje 
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&^f(ciSe 
&OLvi 


jOtytlOH 

CPHtlHv^P 


<tr> 

<td>Truth or Consequences , NM</td> 
<td>August 9th</td> 

<td>93</td> 

<td>4,242 ft</td> 

<td>7,289</td> 

<td>5/5</td> 

</tr> 

<tr> 

<td>Why , AZ</td> 

<td>August 18th</td> 

<td>104</td> 

<td>860 ft</td> 

<td>480</td> 

<td>3/5</td> 

</tr> 

〈 /table 〉 

</body> 

</html> 


BOO 


C + - @ file:///cha 


Vesting Tony's Table 
: ///cha pter 13/Jou mal/table. htmi 


— 



City 

Date 

Temperature 

Altitude 

Population 

Diner Rating 

Walla Walla, WA 

June 15th 

75 

1 ,204 ft 

29,686 

4/5 

Magic City, ID 

June 25th 

74 

5,312 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4226 ft 

41473 

4/5 

Last Chance, CO 

July 23rd 

102 

4,780 ft 

265 

3/5 

Truth or Consequences, NM 

August 9th 

93 

4,242 ft 

7,289 

5/5 

Why,AZ 

August ! 8th 

104 

860 ft 

480 

3/5 
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exercise solutions 


<table> 

<tr> 

<th>Artist</th> 
<th>A1bum</th> 
</tr> 

<tr> 



BE §©luffeti 

On the left, you’ll find Ae HTML 
for a table. Your job is to play 
成 e you ? re the browser displaying 

Ae table. Here’s Ae 

Solution. 


<td>Enigma</td> 

<td>Le Roi Est Mort, Vive Le Roi!</td> 

</tr> 

<tr> 

<td>LTJ Bukem</td> 

<td>Progression Sessions 6</td> 

</tr> 

<tr> 

<td>Timo Maas</td> 

<td>PictureS</td> ^ ^ ^ Untitled 

</tr> 

</table> 


Wic ■fov*m3"t*bcdi HTA1L- so 
七 ha 七 vt’s cas'icv *to vead Y ou 
be a Kuw»aw- 



Artist 

Album 

Enigma 

Lc Roi Est Mort, Vive Lc Roi! 

LTJ Bukcm 

Progression Sessions 6 

Time Maas 

Pictures 


638 Chapter 13 



















tables and more lists 


Sharpen your pencil 


The double dotted lines are giving Tony’s table a busy and distracting look. 
It would be much better, and wouldn’t detract from the table, if we could 
just have one border around each table cell. Can you think of a way 
to do that with styling given that you’ve just learned? You can set the 
border-spacing property to 0 to remove the space between the borders. 



: mg 


lllllllll 



lllllllll 



S f 312 ft 




rr 


41 


BcUcv, but st.ll Kavc Uo Imcs /吵七叶 

tat\\ o-tKcv, so wc Kavc a double, 七 doiicd 
bovdev. ^Itd vatKcvjust be OHB bordev bcW ⑶栋 
tells. Wouldn't >NC? 
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exercise solutions 


Sharpen your pencil 


Let’s say we want the date, temperature, and 
diner rating to be center-aligned. And how 
about right alignment on the altitude and 
population? Here’s how you would do that: 


.center { 

text-align : center 

} 

.right { 

text-align : right; 


ttcvc avc two classes, 
-fov a^d oy\c 

•fov ahy 州 Cirvt. 



<table > 

<caption>The cities I visited on my Segway'n USA travels</caption> 

<tr> 

<th>City</th> 

<th>Date</th> 

<th>Temperature</th> 

<th>Altitude</th> 

<th>Population</th> 

<th>Diner Rating</th> 

</tr> 

<tr> 

<td>Walla Walla, WA</td> 

<td class= M center">June 15th</td> 

<td class= M center M >75</td> 

<td class= n right n >l,204 ft</td> 

<td class= M right M >29,686</td> 

<td class= M center M >4/5</td> you just add 


</tr> 

<tr> 

<td>Magic City, ID</td> 

<td class= M center M >June 25th</td> 
<td class= M center M >74</td> 

<td class= n right n >5,312 ft</td> 
<td class= M right">50</td> 

<td class= M center M >3/5</td> 

</tr> 


〆 <id> "to "tKc 

dass! 



</table> 



To create alternating colors in the Magic City, Last Chance, and Why table rows with a class, 
add the class=“cellcolor” attribute to the opening <tr> tags in the table rows, like this: 


<tr class= n cellcolor"> 
<td>Magic City, ID</td> 
• • • 

</tr> 



Walla Walla, WA 

June 15th 

75 

1,204 ft 

29,686 

4/5 

Magic City, ID 

Jun« 25th 

74 5,312 ft 

50 

3/5 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41,173 

4/5 

Last Chance, CO 

July 23rd 

102 4,780 ft 

26S 

3/5 

Truth or Consequences, NM 

August 9th 

93 

4,242 ft 

7,289 


Why, AZ 

August 18th 

104 

860 ft 480 

3/5 
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Just to make sure you’ve got this down, draw an arrow from 
each <td> element to its corresponding cell in the table. 
Here are the answers. 

<tr> 

<td rowspan= n 2 n >Truth or Consequences, NI 
<td class="center">August 9th</td> 

<td class:’'center n >93</td> 

<td rowspan= M 2 M class= n right n >4,242 
<td rowspan= M 2 M class= n right n >7,289</td> 
<td class="center n >5/5</td> 

</tr> 

<tr> 

<td class="center">August 27th</td> 

<td class= n center n >98</td> 


<td class= n center n >4/5</td> 
</tr> 



T\ru*th or 

fAu^us-t 


V- 

V> 

l / 轟 i ^ 


f 

刚 

August 

Z7U 


10 



4 Serious Solwfcioti 


To create alternating colors in the Magic City, Last Chance, and Why table rows with a 
pseudo-class, use the nth-child(odd) pseudo-class to select the odd <tr> rows in the table: 


tr:nth-child(odd) { 
background-color : 
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exercise solutions 







It’s time to fall back on all that training you’ve done. What you need to do is 
change the table heading background colorfor just Tony and Tess, and do 
it without changing the background of the main table headings. How? You 
need to find a selector that selects only the nested table headings. 


Wc dah use a dcsdchdah-t 
sclc^-toir -to sclcd-t just -the 
味 s£ c d tabic Kcadcv-. fWs 一 


you dah do -feha-fe-* 


(I) Stav-t by sclcttmj 
七 he ou 七 ev table... 


Citv 

Date 

Temperatyre 

Altitude 

Population 

Diner Rating 

Walla Walla, WA 

June I St hi 

75 

1,204 ft 

29,686 

4/S 

Magic City; ID 

June 25th 

74 

S,312 ft 

SO 

3/S 

Bountiful, UT 

July 10th 

91 

4,226 ft 

41473 


4/5 


Last Chance, CO 

July 23rd 

102 

4,780 Ft 

26S 


3/S 



August 9th 

93 



S/S 

Truth or Consequences, NM 



4,242 ft 

7 f 23^ 


Teas 5/5 



August 27th 

98 












Torvy 4/5 


Why, AZ 

August 18th 

104 

860 rt 

ISO 


(2.) TV>cn sclcd-t ttc 
urvJrvCV* table... 


(3) TKc>r» selet 七七 he 
-tabic iicadur^j- 


.广 

De 七 cvVmc 七 he 
sclcdiov -to sclcdt 
ohly 七 lie nested 
table Kcad'mg 

clc 州 cn*ts. 


(I) 


(Z) 


G) 


: table stable 土 h 


background-color : 



white; 
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HTMLcross Solution 
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14 kml ¥orms 



Yeah, just got your 
form. Were checking it 
with the server now, and 
then well get a response 
right back to you. 


So far all your web communication has been one-way: 
from your page to your visitors. Golly, wouldn’t it be nice if your visitors 
could talk back? That’s where HTML forms come in: once you enable your pages 
with forms (along with a little help from a web server), your pages are going to be 
able to gather customer feedback, take an online order, get the next move in an 
online game, or collect the votes in a “hot or not” contest. In this chapter you’re going 
to meet a whole team of HTML elements that work together to create web forms. 
You’ll also learn a bit about what goes on behind the scenes in the server to support 
forms, and well even talk about keeping those forms stylish. 


this is a new chapter 




browsers and forms 


How forms work 

If you use the Web at all, then you know what a form is. But you might not have 
really thought about what they have to do with HTML. A form is basically a web 
page with input fields that allows you to enter information. When the form is 
submitted, that information is packaged up and sent off to a web server to be processed 
by a server script. When the processing is done, what do you get? Another web page, 
of course, as a response. Let’s take a closer look at how this works: 




bv"ov/scv" patkajcs up 3ll 

da*ta m *bi^c a^d sends i-b 
ovcv" *to 七 scv"vc\r. 


—s 岬叫 ㈣ 二 


fovw ， W sub 


o 



Browser 




The scv-vcv- sdv-ipt fv-odcsscs the data m the 
-fov-m ar\A dv-catcs a bv-a^d-^cv/ HTML pay 办 a 

v-cspo^sc, whidh it ha^ds bade "to the v/cb SCV-VCV-. 






TV^cb sev •擦 
办讓 S6〜，s ， cs ? o.sc 

V>a6k 


The b\rowsc\r gets the 
\rcspohsc ahd displays it. 


The vespo 的 se is a 朽 

ttT/l/IL web fay. 


ie 

Browser 
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html forms 


How forms work 
m the browser 

To a browser, a form is just a bit of HTML in a page. 
You’ll see that you can easily create forms in your 
pages by adding a few new elements. Here’s how a 
form works from the browser’s perspective: 


0 0 0 

cm® 0 


Enter the Contest 

file:///chapterl4/contest/form.html 


Just type in your name (and click Submit) to enter the contest: 
First name: 

Last name: 

Sub m i t 


The browser loads the page 

The browser loads the HTML for a page like 
it always does, and when it encounters form 
elements, it creates controls on the page that 
allow you to input various kinds of data. A 
control is just something like a button or a text 
input box or a drop-down menu — basically 
something that allows you to input data. 

You enter data 

You use the controls to enter data. Depending 
on the type of control, this happens in 
different ways. You can type a single line of 
text into a text control, or you might click one 
option of many in a checkbox control. We’ll 
look at the different kinds of controls shortly. 

You submit the form 

You submit the form by clicking on a submit 
button control. That’s the browser’s cue that it 
needs to package up all the data and send that 
data off to the server. 


The server responds 

Once the server has the form data, it passes 
it off to the appropriate server script for 
processing. This processing results in a 
brand-new HTML page that is returned to 
the browser, and since it’s just HTML, the 
browser displays it for you. 






0 0 0 Enter the Contest 

◄ ►"] I C I ( + I ^ file:///chapterl4/contest/form.html 

Just type in your name (and click Submit) to enter the contest: 
First name: Buckaroo 
Last name ： Banzai 
Submit 
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how to write a form 


What you write iw HTML 

There’s no deep mystery to creating forms with HTML. In fact, in this chapter 
you’re going to meet a whole new set of HTML elements that all work together 
to create forms. The best way to get a feel for forms is to look at a little HTML 
and then to give it a try. Check out this form: 


<!DOCTYPE html> 


<html> 



<head> 

<meta charset= n utf-8 n > 
<title>Enter the Contest</title> 
</head> 

<body> 


Tills is dll old 
Ka*t -fo\T Y< 


/ou y \ o ^- 


Wtrts -fov» 



❹ 


<form action= M http : / /wickedlysmart. com/hfhtmlcss/contest .php" 
method: n POST n > 

<p>Just type in your name (and click Submit) to vc goi tiic <-fo\rnr»> 

i-bd-r... 

enter the contest : <br> 



❾ 


First name : <input type= n text" name= n firstname n value= nn > <br> 
Last name : <input type= M text n name= M las tname M value= nn > <br> 
<input type= n submit n > 

■■ … a 灼 d a \)\ay\cM o-f 

</p> r\cs*bcd mside i 七 . 

</form> 


</body> 

</html> 


o 



For now, just take a good 
look at the form and 
whafs in it; we，U be going 
into all the details 
throughout the chapter. 
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html forms 


What the browser creates 


Big surprise; to create a form, you use a <form> element. Now, just about any block- 
level element can go inside the <form> element, but there’s a whole new set of elements 
that are made especially for forms. Each of these form elements provides a different 
way for you to enter information: text boxes, checkboxes, menus of options, and more. 
We’ll examine all these elements, but first take another look back at the HTML on the 
previous page and see how the elements and content inside the <form> element are 
displayed in the page below: 


just ho\rmal 

pa^ragiraph text a 


/W *two 七以七 

do 灼 *brols -fo\r 3 

-fiv-st By\A las 七 




o o Enter the Contest 

/// c h a pter 14 oote sx ffo rm .html 


Y\ 




ttTAIL you use 

clerwCtrrt 七 0 ^\rca*tc *b^csc. 



Just type in your name (and click Submit) to enter the contest: 
First name: 

Last name: 

Submit 


A 灼 d *bV^c 

suburb Wtton. 

(^oiaV- butto 灼州 

say u Subm*i*t 
•ms*tedd.) 


’吟七 






You'll find the contest form in your “chapterl4/contest” folder. Open it, take 
another look around, then load it in your browser and enter the contest. 


O^A0 
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the form element 


How the <form> element works 

Let’s take a closer look at the <form> element — not only does it hold 
all the elements that make up the form, but it also tells the browser 
where to send your form data when you submit the form (and the 
method the browser should use to send it). 


The rwethod atbribute 
dctciri^'mcs hov/ the -Pov-rw 
data will be scir>*t b> tlic 
sc\rvc\r. WcVc go'mg {p 
use "the rwost 
ov\t ： POST- Latev" m 七 he 




^oes msidc 


TKc ad 七 10 灼 atbribu 七 e 

Isolds {\\t URL o( *thc 

web sevvev-... 


-foldcv 

*tiic SdVlf 七 


o( the SCV-VCV- 

Sd 中七 i\\ai will 
^ottss -the -Pov-i 


is m... 



dhapteir well talk aboui 
othev- v/ays -to send data, 
3^d why you rwijh-t o\r 
rwijh-t r\o{, use POST- 



<form action= M http : / /wickedlysmart. com/hfhtmlcss/contest .php" method: n POST n > 


SvcvytK'm^ mside youv 
-fovm ^ocs KcV"C... 


</form>^"^... a d the dlosmg taj 

ev>ds *tKc -fovm. 


Hey wickedlysmart.com, my 
user just clicked a button to 
submit a form. I've got some form 
data Tm sending you via POST. IVs 
addressed to the ''contest.php /, server 
script in the 、、 hfhtmlcss" folder. 


0 


0 





m 



Browser 



wickedlysmart.com 
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Okay, so I have an HTML 
form—that seems like the 
easy part. But where do I get 
a server script, or how do I 
make one? 


Good question. 

Creating server scripts is a whole topic unto 
itself and far beyond what we cover in this book. 
Well, we tried to cover them, but the book ended 
up weighing more than you do (not good). So, 
anyway... 

To create server scripts, you need to know a 
scripting or programming language, and one 
that is supported by your hosting company. Most 
hosting companies support languages like PHP, 
Ruby on Rails, Perl, Python, Node.js, and Java 
(to name a few), and if you’re interested, you’ll 
definitely want to pick up a book specifically 
for creating server scripts (also known as 
server-side programs). Check with your hosting 
company; they sometimes provide simple scripts 
to their customers, which takes the work out of 
developing these scripts yourself. 


As for this chapter, we’ve already developed 
the server scripts you’ll need. All you’ll need to 
do is put the URL of the script in the action 
attribute of your <form> element. 
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overview of form elements 


What can go in a form? 


You can put just about any element into a form, but that’s not what we really 
care about right now; we’re interested in the form elements that create controls in 
the browser. Here’s a quick rundown of all the commonly used form elements. 
We’re going to start with the < input 〉 form element, which plays many roles 
in the form’s world. 



Notice -that 

bo*th o( 
these use 
same HTML 
element bu*t 

values m *thci\r 
•type atbribute. 



text input 

The text <input> element is 
for entering one line of text 
Optional attributes let you 
set a maximum number of 
characters and the width of 
this control. 


<mput> element y/i*th 3 type ^ 
at*t\ribuic o( “ 七 ext” dircatcs a 
dohtirol \y\ ihc bvov/sev pay. 

Most -Pov-m elements vc^uivc a 的 ame 

*tha*t is used by the sevvev sdv-ift- Well 
set how this works m a bit. 


Use 如切 ? e , 

•mdwbe Y ow … 扣七 a 七以七 m 卜 

<input type= n text n name= n fullname"> 


clcw'C^'t d 
void clcw'C^'t) 
so -tKcvc s Y \0 
£.or\*tcy\*t 3*f*tcv 


•i*t. 


submit ii^«t 


The submit <input> element creates 
a button that allows you to submit a 
form. When you click this button, the 
browser sends the form to the server 
script for processing. 


Submit 


T^c Wbto 灼 labeled 
w SuWW (饮 w SuWrt 

6^ucv*y ， ^ ^7 七， 
al*tV^ou^ you 

ba*b ( 如 c 11 

sV^oy/ y ou la*^ cyr ). 


<input type= n submit n > 


a submit button, spcdi-Py w subrwii w 

as 七 he <mput> clcrwc^s -type- 
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html forms 



Same hcv-c ； 
v/eVe s*til| us*m^ 
七 he <*mpu*t> 
clcmc^ jus-t 
v/i 七 h diTTC\rc^*t 
type values. 


I 

radio input 

Tha rArlin ^innnt^> alomi 


The radio <input> element creates a 
single control with several buttons, 
only one of which can be selected 
at any time. These are like old-time 
car radio buttons; you 〃 push 〃 one in, 
and the rest〃pop out." 


* 


Use a \radio <mpu-t> 
-fo\r cadh 


/\|| i\\t v-adio buttons 

assod'idied a 
sc*t tV^oifi-cs mus*t 
Vidve *tV^c same ^aw>c... 



The v-ad'io tcm*brol 

dllov/s Ohly O 外 e d wt 


...bu*t t\\o\Cc hds 
a di-Pfcirch-t value. 


<input type="radio" name: 
<input type="radio" name: 


hotornot n value= n hot"> 
hotornot" value= n not"> 



checkbox input 

A checkbox <input> element 
creates a checkbox control that can 
be either checked or unchecked. 
You can use multiple checkboxes 
together, and if you do, you can 
check as many or few as you like. 


Like \radio ； 
you use OhC 

<ihfut> dcrwCht 
•fov ^hoidc- 


^ Salt 
^ Pepper 
□ Garlic 

Unlike vadio ku*t*toy\s, a 

k - ， alloy/s TXCO ov- 

move oJf a se*t of Aoites. 


Related ^hcdkbo^cs also shav-c 

d ton\m\OY\ 灼 


Eadh dhc 乙 kbo 乂 has a 

di-P-Pcv-c^-t value. 


<input type="checkbox" name: 
<input type="checkbox M name: 
<input type="checkbox n name: 


spice" value= ▼’Salt▼’> 
spice" value= n Pepper M > 
spice" value="Garlie n > 
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more form elements 


What can go in a form? (part 1) 

Okay, not every form element is an <input> element. There are a few others, like 
<select> for menus and <textarea> for typing in more than one line of text. So, 
why don’t you get familiar with these as well before moving on? Oh, and by the way, 
once you do that, you’ll know 90% of the form elements (and 99% of the form 
elements that are commonly used). 


textarea 


The <textarea> element 
creates a multiline text area 
that you can type into. If you 
type more text than will fit 
into the text area, then a scroll 
bar appears on the right side. 


Customer feedback 

I love my new Mini Cooper! I got the red, sporty model, and IV 0 
been zipping around town like there's no tomorrow. And, my 
new iPod fits perfectly iin the dash drink holder. Of course, now 
everyone else wants one, too. 


vows 


6ols 


y\o*t 
eleme 此 

so i*t bo*th 
3 ir\d 

dlosm^ *tay. 

<textarea name 


a 


Wsc -the 

atthbute "to 
9 iv « the clc^i 

i- 

= n comments" rows: 

^ attHbutc tdls the 

b^rowsev how w h y 

■f^ll "to make the text av-ca. 


"10" cols= M 48 n X/textarea> 


that joes bc*twcc^ the 
ofamg dlos'm^ *tajs bedomes 

■the 'mi*tial m *thc bvows^r’s 

*tc 乂 t avea doir>*tv*o|. 


>u cby \ also spe^i-fy 七 he width height o-f a CSS- 
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html forms 


select 


The <select> element creates a menu 
control in the web page. The menu 
provides a way to choose between a set 
of choices. The <select> element works 
in combination with the <option> 
element below to create a menu. 


The sded-t dcr^cht ^v-catcs 

d rwChu -that looks like 
七 his (al*thoujh -the look 
v/ill vavy oy\ -the 

b\roy/sc\r you’ve 


The c i^ Chi 


OhC ry»Chu. 


J ⑽ 今 


<select name="characters"> 

〈option value= M Buckaroo M >Buckaroo Banzai</option> 
<option value= M Tommy n >Perfect Tommy</option> 
<option value="Penny M >Penny Priddy</option> 
<option value= M Jersey M >New Jersey</option> 
〈option value= n John▼▼>John Parker</option> 
</select> 


option 


The <option> element works with 
the <select> element to create a 
menu. Use an <option> element 
for each menu item. 


A*ftc\r didkmg OY\ the 
the i-fccrws 
dv-op dovm. 


Perfect Tommy 
Penny Priddy 
New J ersey 
John Parker 




<select name= n characters n > 

<option value= M Buckaroo">Buckaroo Banzai</option> 
<option value= M Tommy">Perfeet Tommy</option> 
<option value= M Penny M >Penny Priddy</option> 
<option value= M Jersey n >New Jersey</option> 

<option value= M John M >John Parker</option> 
</select> 


The ^ohtch-t of the 
<optioh> dcr^Cht is used 
士。 V" the i"tcrws ； 

j dcsd\rip-tioh. Ea^h rhChu 

_ _ 〆 oftioh also i^ludes a 

Y value \rcp\rcschtihg the 

你 Chu itcrw. 
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even more form elements 


Oh, evcw more can go m a form! 

Ah yes, we can’t forget all the new fun stuff. With HTML5, 
we’ve got even more specialized input forms. Let’s take a look: 


Wait, HTML5 
adds even more great 
input types! Don*t 
forget those! 


number input 

The number <input> element restricts 
input to numbers. You can even specify 
a min and max number that is allowed 
with optional attributes. 


7 




Some browsers show a\r\roy/s l/Y 

you vise *bo *mtv-casc or 
debase {\\t r\iAmbcv-. 


T"hc \umbc\r w type mca^s youVc 
d humbev* only, ⑽七七以七 . 、 

V 

<input type= n number" min="O n max= n 20"> 



Wsc "the 你 mm 

aiiv-ibutcs -fco \rcsiv-idi ihc 
i^umbcv-s allowed. 


range ii^ut 


The range <input> element is similar 
to number except that it displays a 
slider instead of an input box. 


o 


Both numbeir have op^tio^dl 

step aitvibutc you cav\ use -to spedi-fy -the 
r^urwbev- o( micv-vals (or ihc values. 


<input type="range" min= n O n max= n 20' f step= n 5 n > 



color 

Use the color <input> to specify 
a color. When you click on the 
control, a color picker pops up 
that allows you to select a color 
rather than having to type in 
the color name or value. 


I-P 七 he dolov 
mpu 七 is ⑽七 
supported by 
"the bv-ov/sc\r, 
you’ll jus 七 jet 
a \rcjulav- twt 
’mpu 七 ms-tcad- 





□ 


#ffc90€i 


Other … I 


<input type= n color"> 
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I - 

date 


Use the date <input> element to specify 
a date, with a date picker control. The 
control creates a valid date format string 
to send to the server script. 




: ) 

m 


May 


nn 

2012 


Mon 

Tue 

Wed 

Thu 

Fri 

Sat 

Sun 

^0 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

IS 

16 

17 

18 

19 

20 

21 

22 

23 

24 

2S 

26 

27 

28 

29 

30 

31 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 




t 

Today 

1 


<input type: n date n > ^olo\r, i-f -the date mpu-t suppoirted by -the 

biroy/sa ycl, you II jel a v-ejulav 七以七 mput rnstead. 


email input 


The email <input> element is just a text 
input, but on some mobile browsers, 
you’ll get a custom keyboard for email 
when you start typing. 

<input type="emai1"> 


Email ： Buckaroo Banzai 


url input 


Like email and tel, the url <input> 
type is just a text input, but causes 
a custom keyboard to pop up on 
mobile devices. 

<input type= n url n > 


wi 诎 these s^\a\\zj^d i 仏 up you 
rwake su\rc you khow wha-t values the scv-vcv- is 

3hd use the v*iglvt <ihpu*t> *typC- 


tel 


The tel <input> element is also just a text 
input, but like email, causes a custom 
keyboard to pop up on mobile devices. 

<input type= n tel n > 


Phone: 555-1212 



Tiicsc tWcc <mpu*t> 


all vav-iatior\s o-f 


it%i bvoy/sevs you y/or. t 

3 But or. mobile Woy/sc^ you 

yt a 6us*tom keyboav-d makes i 七 easier *to to 
Ae ^^av-a^*tcvs you r\ccd> like / ar\d & laurwbevs. 


Watch it! 


Not all browsers 
fully support these 
input types yet. 

丁 he input types on these 
tw o pages are new in 
. vhile you can use them 

in all web pages now, some may not 
display as you see them here. 


HTML5, dnd while you 
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the bean machine 



The Starbuzz Coffee website 
is kicking butt. We've got a new 
concept called the ''Bean Machine/ 
which is an online form to order 
our coffees. Can you make it 
happen? 


A droP-dovjv\ 







WevVs 

what 

the -Povrw 
should 
look like. 


Cincome l4rousc t>ieirtd 

Typ«: 

Q Whole beav\ 

Q> ^vound 

Number o-f bags： — 



Must av-v-ivc by date：[ 


1 


Extras: 

□ ^i-ft >wvaf 

□ Indude with order 

SKif io ： 

Name: I ~~) 

Address ： I 

Obf I ) 

S-ta'te ： 1 




z»r L 

PhohC: 

Cus*tomCV* CowmCivts: 


A cMo\Ct 

whole o\r 

y-ou^d Coffee 
you ddrt ohly 
hoosc erne) 


Hoy/ mdhy 
bajs, av\d 
-they 
should 
a\r\rivc by 


>wv-af 
ov mdude 

a tatalo^ 

(^Koosc ZjCVO, 
OY\t, OV bo*t^) 


Ship "fco 
olddv-css, 
^ohsistma 
o( six text 
boxes 



A bo% (or 

tus*torr\C\r 

dom 你 cvvts 

f\Y\d 3 

sukw'»*t 

butbem 
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html forms 


m 


Markup Magnets 


Your job is to take the form element magnets and lay them on top 
of the corresponding controls in the sketch. You won’t need all the 
magnets below to complete the job; some will be left over. Check 
your answer in the back of the chapter before moving on. 



<input type= n color n • • • 
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creating the form 


fretting ready to build the Peaw Machine form 

Before we start building that form, take a look inside the u chapter 14 / starbuzz’’ 
folder, and you’ll find the file “form.html”. Open it and have a look around. All 
this file has in it are the HTML basics: 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>The Starbuzz Bean Machine</title> 

</head> 

<body> 


<hl>The Starbuzz Bean Machine</hl> 

<h2>Fill out the form below and click ''order now 〃 to order</h2> 


-fo\rm is 

</body> b> 30 

</html> 



AH we’ve 3 。七 so -fav- is a 

dlo^ y/i-th ms*bru^ti 。 灼 s. 


- -.I hat 




Figuring out what goes in the form element 

It’s time to add your very first <form> element. The first thing you have to know 
when creating a <f orm> element is the URL of the server script that is going to 
process your form data. We’ve already taken care of that for you; you’ll find the 
server script that processes Starbuzz orders here: 


http : //starbuzzeoffee.com/processorder.php 


This URL 


foih-ts^o 


the 


S-tavbuzz. Coffee websrtt.. 



...a^d -to pvo^ssovdev.^p sc^rvcv 
stvift or^ sevvev tiieve. 

TWis sc\rvcv shrift already k^oy/s 
*to -take ovders -fvom -fovm 
*to build- 
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Adding the <form> element 

Once you know the URL of the server script that will process your form, all you need 
to do is plug it into the action attribute of your <f orm> element, like this (follow 
along and type the changes into your HTML): 


<!DOCTYPE html> 
<html> 


<head> 

<meta charset="utf-8"> 


<title>The Starbuzz Bean Machine</title> 

</head> 

<body> 

<hl>The Starbuzz Bean Machine</hl> 


<h2>Fill out the form below and click ''order now” to order</h2> 

<form action="http : //starbuzzcoffee.com/processorder.php" method:"POST n > 




HevVs 七 he 
-Po\rrw element 



</form> 

</body> 

</html> 




TiiC ad*tioy> dorrtams 七 1^ 

URL of sevvev sdvift- 


6\o ahead add 七 he 

-Poirrw dlos'm^ -tag "too. 


广 . 

v-cw'Cw'kcv- v/cVc 
七 he POST bo dclWcv 

-foV*W\ "to SCV"VCV". 

Move ov\ tWis latcv*. 


So far, so good, but an empty <form> element isn’t going to get you very far. Looking back 
at the sketch of the form, there’s a lot there to add, but we’re going to start simple and get 
the “Ship to” part of the form done first, which consists of a bunch of text inputs and a 
number input. You already know a little about text inputs, but let’s take a closer look. Here’s 
what the text inputs for the Starbuzz form look like: 

Wert Ihc type is “ieW because -this 
is gomg -to be a mfu-t to^tv-ol. 


卞 USC ± ^ C <•__ <input 

derwejvt -rov- a -rew 

Co^broh. 〈input 

The "type atbribute <input 

detev-mmes what k’md 

o( CoM \i is. 〈input 

〈input 

〈input 




type="text' 

'name= 

="name n > 

type="text' 

'name= 

="address"> 

type="text' 

'name= 

="city"> 

type="text' 

▼ name= 

="state"> 

type: 

"text' 

'name= 

="zip n > 

type: 

"tel" 

name=' 

▼phone"> 



Wlc^VC OY\t 七以七 
-rov cadii 

av-ea'm *tV>c 


Name, Mdrtss, C\bf, 
S*ta*tc, PV>o 灼 c. 


ttcv-c -the "type is U’ because wcVc 
a "telephone ^umbev- -fo\r the value- 


The Y\^rr\t a*t*tv-ibu*tc d^*b as by\ -fov- *thc 

dd*ta the usev- types’m. Kotidc how ca 匕 h o^c is se 七七。 
a value- Lets sec how this wovks … 
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form element names 


How form element names work 


Here’s the thing to know about the name attribute: it acts as the glue between your 
form and the server script that processes it. Here’s how this works: 

Each input control in your form has a 
name attribute: 

When you type the elements for a form into your HTML 
file, you give them unique names. You saw this with the 
text and tel inputs ： 




〈input 

type: 

"text' 

'name= 

="name n > 

〈input 

type: 

"text' 

'name= 

= n address"> 

〈input 

type: 

•▼text’ 

'name= 

="city n > 

〈input 

type="text' 

'name= 

="state"> 

〈input 

type: 

"text' 

'name= 

="zip n > 

〈input 

type: 

"tel" 

name=' 

1 phone"> 


When you submit a form, the browser 
packages up all the data using the 
unique names: 

Say you type your name, address, city, state, zip, and 
phone into the form and click Submit. The browser takes 
each of these pieces of data and labels them with your 
unique name attribute values. The browser then sends 
the names and values to the server. Like this ： 


The Uhi^uc 

-fov- ea 匕 h 


Buckaroo Banzai 



y.amca 

value -Vvow 

data 70U 


address = Banzai Institute 

city = Los Angeles 

state = CA 

zip = 90050 

phone = 310-555-1212 




^c*b i*b oy/r\ 灼 


^a*t you m*to 

-rovm. 


Name ： Buckaroo Banzai 
Address ： Banzai Institute 


City ： Los Angeles 
State: CA 


Zip: 90050 

Phone: 310-555-1212 





processorder.php 



www.starbuzzcoffee.com 


1/Vha 七 -the b\rov/sc\r fadka^cs 
uf (or sevvev- 



Thc sewev- sdvip*t 七 he -Povm dd'td b> be 

labeled so i*t -tell y/hat is what 
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html forms 


What’s the difference between a 
text <input> and a <textarea>? 

You want to use a text <input> for 
entering text that is just a single line, like 
a name or zip code, and a <textarea> for 
longer, multiline text. 

Can I make the submit button say 
something other than “Submit ”？ 

Yes, just put a value attribute in the 
element and give it a value like “Order Now". 
You can also use the value attribute of text 
input to give that input some default text. 

Is there a limit to how much 
text I can type into a text <input> or a 
<textarea>? 

Browsers do place a limit on the 
amount of text you can type into either a 
text<input> ora <textarea>; however, it’s 
usually way more than you’d ever need to 
type. If you’d like to limit how much your 
users can type into a text <input>, you can 
use the maxlength attribute and set it to a 
specific number of characters. For example, 
maxlength-100" would limit users to typing 
at most 100 characters. However, for a 
<textarea>, there is no way with HTML to 
limit how much your users can type. 

The “tel”, “email”，and “url” look 
just like text inputs. Is there really a 
difference? 

The "tel", “email”，and “url” type inputs 
all send text strings to the server script, so 
in that way, they are basically the same as 
a text type input. However, because the 
browser knows that the type is “tel”，for 
instance, it can be a bit smarter about the 
user interface it provides to the user. So, on 
some mobile browsers, the browser may 
display a numeric phone keypad. 


tJiereiare no ^ 

Dumb Questi9ns 


I still don’t get how the names get 
matched up with the form data. 

Okay, you know each form element 
has a unique name, and you also know 
that the element has a corresponding value. 
When you click the Submit button, the 
browser takes all the names along with their 
values and sends them to the server. For 
instance, when you type the zip code “90050” 
into a text <input> element with the name 
“zip”，the browser sends “zip = 90050” to the 
server when the form is submitted. 

How does the server script know 
the names I’m going to use in my form? 

In other words, how do I pick the names 
for my form elements? 

Good question. It really works the 
other way around: you have to know what 
form names your server script is expecting 
and write your form to match it. If you’re 
using a server script that someone else 
wrote, he’ll have to tell you what names 
to use, or provide that information in the 
documentation for the script. A good place to 
start is to ask your hosting company for help. 

Why doesn’t the <option> element 
have a name attribute? Every other form 
element does. 

Good catch. All <option> elements 
are actually part of the menu that is created 
by the <select> element. So, we only really 
need one name for the entire menu, and that 
is already specified in the <select> element. 

In other words, <option> elements don’t 
need a name attribute because the〈select〉 
has already specified the name for the entire 
menu. Keep in mind that when the form is 
submitted, only the value of the currently 
selected option is sent along with this name 
to the server. 


Didn’t you say that the name for 
each form element needs to be unique? 
But the radio <input> elements all have 
the same name. 

Right. Radio buttons come as a set. 
Think about it: if you push one button in, the 
rest pop out. So, for the browser to know 
the radio buttons belong together, you use 
the same name. Say you have a set of radio 
buttons named “color” with values of “red”， 
“green”，and “blue”. They’re all colors, and 
only one color can be selected at a time, so 
a single name for the set makes sense. 

What about checkboxes? Do they 
work like radio buttons? 

Yes; the only difference is that you are 
allowed to select more than one choice with 
a checkbox. 

When the browser sends the form data to 
the server, it combines all the checkbox 
values into one value and sends them 
along with the checkbox name. So, say you 
had “spice” checkboxes for “salt”，“pepper”， 
and “garlic”，and you checked them all; 
then the browser would send “spice = 
salt&pepper&garlic” to the server. 

Geez, do I really need to know all 
this stuff about how data gets to the 
server? 

All you need to know is the names and 
types of the form elements your server script 
is expecting. Beyond that, knowing how it all 
works sometimes helps, but, no, you don’t 
need to know all the gory behind-the-scenes 
details of what is being sent to the server. 


you are here ► 


663 


adding input elements 


Pack to getting those <iwput> elements iwto your HTML 


Now we’ve got to get those <input> elements inside the form. 
Check out the additions below，and then make the changes in 
your “form.html” file. 


\AfeVc "to 

star 七 W 七七 

CVCVY*bWm^ ms'idc 
3 <^> 


Ncs-t clcrwc^-b div-cdtly 
mside a -Pov-m. 




JUST -the -fovrn 

snippet -Pv"orw W *Po\nnr».lvW 
Hey, we’ve jo-t "to save 
-row t\rccs 


a 



<form action="http : //starbuzzcoffee.com/processorder.php' 
<p>Ship to : <br> 

Name : <input type= n text" name="name"> <br> 

Address : Cinput type="text" name="address"> <br> 
City : <input type="text" name="city"> <br> 

State : Cinput type="text n name="state’▼> <br> 

Zip : <input type="text" name="zip"> <br> 

Phone : Cinput type="tel" name="phone n > <br> 

</p> 

<P> 

<input type="submit" value="Order Now"> 


method=" POST ’▼ > 


Wert avc all *tKc 
ov\t -fov cadK 

J u*t m 七 he 

w £K*if {fi 1 scdtior^ 
<Jc -foVm. 





Wve added a label ^oy t^cM 

mpu*t so the usc\r knows what 
0ocs \y\ the mpui. 


A^d you should also k^ow <*mpu*t> is 
mime element so i-f you v/divt some 
between *thc <mpu*t> elements, you have *to 
add <b\r>s. Tha^s also why you r\tt& *to ^cs*t 

ihem all \Y\i\dt a parajv-aph. 


Pmally ， -fo\rjc*b 七 ha 七 usev-s need a submit bu*t*to^ -to 
submit 七 he -fo\rm. So ddd B submit burtton by By\ 

<’mpu*b> a 七 the bottom v/i*th a *typc o-f “submit”. Also add 
d value o-f w 0\rdcv- Nov/’, y/hidh will *tKc of *tKc 

button -fv-om w Submi*t W *to W 0v-dc\r (VovA 


After you’ve made all these changes, save your “form.html” file 
and let’s give this a whirl. 


-fov^ct *to validate youv HTML, 
pov-m clcw»c^*ts y\ccd validation *toof 
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A form - al test drive 

Reload the page, fill in the text inputs, and submit the form. 
When you do that, the browser will package up the data 
and send it to the URL in the action attribute, which is at 

starbuzzcoffee.com. 


〆 一 ^ You do〆 七 ihmk we’d jive you a ioy example 

that docsh ； i vcally v/ovk, do you? Scviously, 
stav-buzido^-Pcc dorw is all vcady -to take youv 
*fo\rr»» subnrtissioir). 6\o -Po\r iif 


e o o 


The Starbuzz Bean Machine 


十 i ^ file:///chapterl 4 /siarbJZZ/form.himl C ^ Q QJ 


The Starbuzz Bean Machine 

Fill out the form below and click "order now" to order 

Ship lu: 

Name ： Buckaroo Banzai 
Address: Banzai Institute 


City： Los Angeles 


State: CA 


Zip ： 90050 


Phone: 310-555-1212 


Order Now 


Heve’s the -Pov- 

) 


rr\. 


Noiidc -the m ihc 
URL o( youv address bav* 
a-Ptcv- you submit 七 he -Poirrw 
(youll sec the URL m -the 

-rovi^^s adtioh attv-ibu-tc \y\ 


J\y\A \\trts 七 response 

a-f*tcv- suWitt” ( 饮你 . 


0 o o 

The Starbuzz Bean Machine 

■ 

|£ 

◄ ► 

+ 0 http://starbuzzcoffee.com/processorder.php C 

Google O O 


The Starbuzz Bean Machine 

Thanks, Buckaroo Banzai, for your order … But we didn't get your choice of 
beans or whether they arc whole or ground. You might want to click the back 
button to go back and try again, otherwise, wc won't be able to make your Bean 
Machine order, and that would suck. 

Here's what wc received from you so far: 


Number of bags: 1 
Name: Buckaroo Banzai 
Address: Banzai Institute 
City: Los Angeles 
State: CA 
Zip: 90050 
Phone: 310-555-1212 


Heve's i\\t sevvev shrifts 
v-cspo^sc- l*t looks like 


script yt submitted, 

W 七 we haver / 七 ^tv\ i*t 
cvcvytiim^ ^ceds. 


Adding some more input demewts to your form 

It looks like the server script isn’t going to let us get very far without telling it the 
beans we want, as well as the bean type (ground or whole). Let’s add the bean 
selection first by adding a < select 〉 element to the form. Remember that the 
〈 select 〉 element contains a list of options, each of which becomes a choice in 
a drop-down menu. Also, associated with each choice is a value; when the form is 
submitted, the value of the chosen menu option is sent to the server. Turn the page 
and let’s add the <select> element. 
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using a se/ecf 


Adding the <SGlcct> element 

<form action= M http : //starbuzzcoffee.com/processorder.php M method= n post n > 



s ouir bird 的 d 一 hev/ 


<sclcd*t> I 七 jets B 

u^i^uc h 3 nr\C *fcoo. 


<p> 

Choose your beans : 

<select name="beans n > 

<option value= n House Blend M >House Blend</option> 

<option value= M Bolivia M >Shade Grown Bolivia Supremo</option> 
<option value= n Guatemala M >Organic Guatemala</option> 

<option value= M Kenya n >Kenya</option> 

</select> 

</p> 



Inside, v/e fu*t cadK <option> 
oy\c fev t\\o\Ct 


<P> 

Ship to : <br> 

Name : <input type= n text" name= M name M value= M "Xbr> 
Address : <input type="text" name="address" value=" "Xbr> 
City : <input type= M text" name= n city n value=" M Xbr> 

State : <input type= M text M name= M state" value= n M Xbr> 

Zip : <input type= n text" name="zip n value= n "Xbr> 

Phone : <input type= n tel" name= "phone" value= M M Xbr> 

</p> 

<p> 

<input type= n submit" value= n Order Now n > 

</p> 

</form> 



HTML Up Ckse 


Let’s take a closer look at the <option> element. 




1 


The o( -the 

is used as 七 he label 

in "the dirop—dowr> mciDU- 


<option value = 11 Guatemala 11 >Organic Guatemala</option> 

packages 

^ \y\ i\\\s Ust, tiic bvoy/sev v/ould stv\A 
sewev bcav>s — 'Guatemala . 


W\\CY\ bvowsev up frames 

values -the -fo\rm clcmc^*b, i*t uses 
•the 七 he <sclcd*t> eleme 灼七 alo^ 

W\{\\ value of 乙 hose 的 option. 
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html forms 


Test driving the <sdect> element 吞 

Let’s give the <select> element a spin now. Reload your page, and 
you should have a nice new menu waiting for you. Choose your 
favorite coffee, fill in the rest of the form, and submit your order. 


© o o 


The Starbuzz Bean Machine 


0file:///chapterl4/starbuzz/form.html 


C Google 3 ® 


The Starbuzz Bean Machine 

Fill out the f< 

Choose your bcanl 



now” to order 


/ Organic Guatemala 


Ship to: 

Name： Buckaroo Banzai 



Address： Banzai Institute 


City ： Los Angeles 
State: CA 
Zip: 90050 
Phone: 310-555-1212 


Order Now 


fieve’s 七 he -Pov-m, Complete v/rth 
3 <sclcdt> /VotldC dll 

the options av-c ihcvc. 



© o o 


The Starbuzz Bean Machine 


We still givc^ the scv-vcv 

sdvip 七 cvcvyih'mj ii heeds, bui 
七 he sdvipi is cvcvytli'mg 

m the -Povrw so -Pav-. 


ttcvVs -the v-csult o( 
ihc <sclcdt> dhoidc- 


tteve avc all w 
七 wt mpu*ts ar\d 
*tcl 



il 



◄ ► 




0 http://starbuzzcoffee.com/processorder.php C Google O O 


The Starbuzz Bean Machine 

Thanks, Buckaroo Banzai, for your order... But wc didn't get your choice of 
whole or ground beans. You might want to click the back button to go back and 
try again, otherwise, wc won't be able to make your Bean Machine order, and 
that would suck. 


Here's what wc received from you so far: 

Beans: Guatemala 
Number of bags: 1 


Name: Buckaroo Banzai 
Address: Banzai Institute 
City: Los Angeles 
State: CA 
Zip: 90050 
Phone: 310-555-1212 


Looks like Starbuzz. 
assumes >war\*b I 
to^tt i-f do^*t 


you are here ► 
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providing choices 



Change the 〈 select〉element name attribute to “thembeans”. Reload the form and resubmit 
your order. How does this affect the results you get back from the server script? 


Make sure you change the name back to “beans” when you're done with this exercise. 


frive the customer a choice of whole or ground beans 


The customer needs to be able to choose whole or ground beans 
for her order. For those, we’re going to use radio buttons. Radio 
buttons are like the buttons on old car radios — you can push only 
one in at a time. The way they work in HTML is that you create 
one <input> of type “radio” for each button, so in this case you 
need two buttons: one for whole beans and one for ground. Here’s 
what that looks like: 


Thcv-c avc *bw 。 
radio buttons 
ov\t (or y/holc beards, 

ar>d ov\t (or you 灼 dL 


<p>Type : <br> 

<input type="radio" name="beantype" value="whole"> Whole bean <br> 
<input type="radio" name="beantype" value="ground"> Ground 



WcVc us'm^ 
clcmcir>*t (or 七 his, 
•type sc*t *to Vadio w . 



ttcv-c^s "the u^i^uc 灼 amr\C. 

All v-adio bu*bfco 灼 s m 七 he 
sarwc J\roup shave "the 

Sdnr\C 灼 dmC. 



hcv-c^s -the value that will be 
to the sc\rvc\r s^v-ipt O^ly 
oY\t o( -these will be serrt ( 七 he 
oy\c -that is sclc^-tcd the 
-Pov-rw is submi-t-ted). 


Notice 

label v-adio 

bu*t*to^s OY\ 

，吵灼 d side o-f 

clc 眯 errt. 
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html forms 


Punching the radio buttons 

Take the radio button HTML on the previous page 
and insert it into your HTML just below the paragraph 
containing the <select> element. Make sure you reload 
the page, and then submit it again. 


0 o o 


The Starbuzz Bean Machine 




0 file:///chapter 14/starbuzz/form. html 


C Google O O 


The Starbuzz Bean Machine 


Fill out the form below and click "order now" to order 


Choose your beans: Organic Guatemala 


Type: 

0 Whole bean 
Ground 

Ship to: 

Name ： Buckaroo Banzai 
Address ： Banzai Institute 
City ： Los Angeles 


State: CA 
Zip: 90050 


Phone: 310-555-1212 


Order Now 


oy\ youv- b\ro>wsc\r, 
you may have -that 

y\o iradio button was pv-csscd 
whe 的 you ^reloaded 七 he page. 


Wo。, S-tavbuzi -took ouv* ovdev-, at\d 
weVe Y\oi cvch Aot\t wi-th i-t yet- lA/c'vc 
s*ti|| "to 3 idd "the ^urwbcv* o-p bcl^s, 
ihe ship by dale, -the option a^d 

toV* dus^fcomcv* ^orwrwCh*ts- 


How could the order work without all the elements 
being in the form? Well, it all depends on how 
the server script is programmed. In this case, it is 
programmed to process the order even if the gift 
wrap, catalog options, and the customer comments 
are not submitted with the rest of the form data. The 
only way you can know if a server script requires 
certain form elements is to talk to the person who 
developed it, or to read the documentation. 


❸ o o 

The Starbuzz Bean Machine 

jT 

◄ 丨 ► 


+ 0 http://starbuzzcoffee.com/processorder.php 

(Qj Google O O 



The Starbuzz Bean Machine 

Thanks, Buckaroo Banzai, for your order from the Starbuzz Bean Machine. 

Your order of 1 bag of whole Guatemala has been sent to: 

Buckaroo Banzai 
Banzai Institute 
Los Angeles 
CA, 90050 
310-555-1212 


you are here ► 
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using more input types 



Ex^fictS^ 


Hey, 80% of our customers 
order ground beans. Can you 
make it so the ground bean type 
is already selected when the 
user loads the page? 


If you add a Boolean attribute named "checked” into your radio input 
element, then that element will be selected by default when the form 
is displayed by the browser. Add the checked attribute to the "ground" 
radio <input> element and give the page a test. You’ll find the solution 
in the back of this chapter. 

(Remember that Boolean attributes don’t need a value; if the attribute 
checked is present, then the input control is checked.) 



Using more input types 


Next, we need to get the number of bags of coffee the customer wants to purchase, and 
the arrive by date. Both of these are <input> elements, but rather than just using basic 
text inputs, we can be more specific about the exact type of content we want in these 
<input> elements by using the “number” type for the number of bags, and the “date” 
type for the arrive by date. 


For the number of bags, we can get even more specific, by specifying both a minimum 
and maximum number of bags allowed: 


Bv usmex type mm a^d ^ 

baV v/c rtsbr\ci \^i a value ^ks us 4 七 ft 
tusWcv-s ordtrM move \0 ba^s or^t kmd Co\ktt at a 


Number of bags : <input type= n number" name= n bags" min= M l M max="10 n > 


Must arrive by date : <input type= n date" name= M date n > 


、"/ W by usmg the type hcv-c, 

b\rowscv-s iha-t support this iype will 
help ou*t the dus-torwcv- by up 

a pi^kcv* dojvbrol. 


Now, if you try to enter more than 10 bags or fewer 
than 1 bag, in browsers that support the “number” 
〈 input 〉 type, you’ll get an error message when you 
try to submit the form indicating that the value you’ve 
entered is not correct. 


Yc>u II By\ cv-v-ov message i-f you *tv-y -to more 

(ov less) 扣 the allowed! ov 

Number of bags: ] 

Q Value must be [ess than or equal to 10. 
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html forms 


Adding the number and date input types 

Go ahead and add the two new < input 〉 elements to your “form.html” file, below the 
bean type <input>s and above the Ship To fields, and give your new code a test drive. 

<form action="http : //starbuzzcoffee.com/processorder.php" method= n post n > 
<P> 

Choose your beans : 

<select name="beans M > 

<option value= n House Blend n >House Blend</option> 

〈option value= n Bolivia M >Shade Grown Bolivia Supremo</option> 
〈option value= M Guatemala M >Organic Guatemala</option> 

<option value="Kenya M >Kenya</ option> 

</select> 

</p> 

<p> 

Type :<br> 

<input type="radio" name="beantype" value= n whole n >Whole bean<br> 

<input type="radio" name="beantype" value= n ground n checked>Ground 
</p> 


<P> 

Number of bags : <input type= n number n name= n bags M min="l M max="10 n > 
</p> 

<P> 

Must arrive by date : <input type= M date" name= n date n > 

</p> 



<P> 

Ship to : <br> 

Name : <input type= M text" name= M name M value= n "Xbr> 
Address : <input type= n text" name="address” value= M n Xbr> 
City : <input type= M text" name= n city n value= n M Xbr> 

State : <input type= M text" name="state" value= n "Xbr> 

Zip : <input type= M text" name= n zip" value= H n Xbr> 

Phone : <input type= n tel n name= "phone" value= n n Xbr> 

</p> 

<p> 

<input type= n submit" value= n Order Now"> 

</p> 

</form> 


added the Codt 
hcv-c. Rcmcmbcv that 
bv-ov/sev-s may display -these 

oy\ 

whidh browser youVc us'mj. 
Try more ov\t bv-owsev-f 


Turn the page to see the results of our test drive... 
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test driving the form so far 


Test driving the number and date <iwput> elements 


e o o 


The Starbuzz Bean Machine 

Fill out the form below and click "order now" to order 

Choose your beans: 

Type: 

(i> Whole bean 
Ground 


Number of bags: 


Must arrive by date: 7/S/2012 
Ship to: 

Ndllld Ruckaroo Ban74i 

AddrCSS! tanzoi insciiutc 


City: L ox kngtlr\ 

State: oT 

Zip ： qooso 

PhOIlC ： 310-SSS-1212 




ttevVs y/ha 七 we c^-tcv-cd 

m'to -the -Po\rm. Notice 

iha-t the r\urwbcv- mpui 
has up/dovm av-v-oy/s, 
bui "the date tohtv-ol is 
jus-t 3 "toc-t mput m -this 
bvov/sev* (Chv-omc)- 


« Surbu^2 Bean Machine 


❷ O O Th« Surbuzz B«*n Machine 

© fil#7//fhapt^rl4/starbu77/form.hrml 

» \ 


G ti ^ http //<tarbu77foff^#.fom/profmord^r.php 


The Starbuzz Bean Machine 

Thanks，Buckaroo Banzai，for your order from the Starbuzz Bcun Muchinc. 
Your order of 5 bags of whole Bolivia has been sent to: 


Buckaroo Banzai 
Banzai Institute 
Los Angeles 
CA, 90050 
310 555-1212 

and will be delivered by 7/5/2012. 



hcvVs y/ha-t the 
Bean Madhmc vetums. 
Looks like we ov-dcv-cd 
^ bags o( Cof-fee! 


Completing the form 

You’re almost there. You’ve got just two controls 
to add to the form: the “Extras” control with two 
checkboxes and the customer comment control. 
You’re really getting the hang of forms, so we’re 
going to add them both at the same time. 

The B-y^brSs settlor do^sis'ts o( "two 
dhedkbo 乂 es ， ov\t -Pov- gi-p-t v/v-ap 

a^o-thev- -fco mdude a daialo^. 


I 七 looks like Uude da*taloa w 
option should be ^hedked by de-fault 


T\\t Cus-b^cv- 

Comwe^-b settlor *»s 
jus*t a <-bc%*tav-ca>. 
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html forms 


Adding the checkboxes and text area 


You know the drill: look over the new HTML and add it to your “form.html”. 

<form action="http : //starbuzzcoffee.com/processorder.php" method= n post n > 

<p> 

Choose your beans : 

<select name="beans M > 

<option value= n House Blend">House Blend</option> 

〈option value= n Bolivia M >Shade Grown Bolivia Supremo</option> 
〈option value= n Guatemala">Organic Guatemala</option> 

<option value="Kenya M >Kenya</ option> 

</select> 

</p> 

<p> 

Type :<br> 

<input type="radio" name="beantype" value ： 

<input type="radio" name="beantype" value ： 

</p> 

<p>Number of bags : <input type= n number 

<p>Mu st arrive 


whole n >Whole bean<br> 
ground" checked>Ground 


name= n bags" min= M l n max= M 10 n X/p> 
by date : <input type= M date" name="date M X/p> 

ttcv-c y/c vc added a (or tat\\ Notice 

-that these shav-c i\\t same □”… /~■•"but haw di++c\rch-t values 

Extras :<br> 

<input type="checkbox n name= n extras[] n value="giftwrap n >Gift wrap<br> 

<input type="checkbox" name="extras[] n value= n catalog" checked>Include catalog 
with order A ^ 

</P> 

WcVc us'mg A s ^>*1^ *tV^c 

<p> a*t*tv-ibu*tc 

Ship to : <br> that 

Name : <input type= M text" name= n name M value= M M Xbr> 

Address : <input type="text" name= M address" value=" n Xbr> 

City : <input type= M text" name= n city M value= M "Xbr> 

State : <input type= M text M name= M state" value= n M Xbr> 

Zip : <input type= n text" name= n zip n value= M n Xbr> 

Phone : <input type= M tel M name= "phone" value= n n Xbr> 

</p> 


by dc-faul*t. You 
cby\ add a 
attribute *to more 
oY\t dhc^kboy.. 


radio buttons ， 
vc pu*b 
labels -to 
i\\t o^ 
i\\t cMtc\A)o%ts. 


<p>Customer Comments :<br> 

<textarea name= n comments n X/textarea> 

Hcv-cs -the text 

<input type= n submit" value= n Order Now M > 

</p> 

</form> 



<p> 
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successful submission 


The final form test drive ^ 




Save your changes, reload, and check out the new form. 
Don’t you think it’s looking quite nice? 


© o o 


The Starbuzz Bean Machine 


0file:///chapterl4/starbuz2/form.html 


C I Google 


The Starbuzz Bean Machine 

Fill out the form below and click "order now" to order 


Choose your beans: House Blend 
Type: 

C Whole bean 
Ground 



Rxtras: 

□ Gift wrap 
@ Include catalog with order 

Ship to: 


ttcv-c^s ouv bv-a^d-^cw 

y/ith the datalo^ 
dhctkbox. already cMtcktd- 



Phone: 310-555-1212 


Customer Comments: 



/W a w/ 

avea as y/cll 


Send me some samples if 
you have any available. 


Order Now 


Be suv-c *tvy ou*t all the 
various dombmatio^s sc^d'mj 
this -fov-m (y/i*th/v/i 七 hou 七 ji-ft 
y/\raP, v/ith/v/i 七 hou 七 a da-taloj, 

diWev " ⑶七 do-f-fccs, and so 。灼） 
see how i*t all v/ov-ks. 


ttcv-c^s v/ha*t you yt v/h ⑶ you submi-t. 
The scv-vcv sdv-ip*t hds \re 匕 eived all 
•the -form dd'td oy\ the fSJC By\A has 
mdo\rpov-a*tcd i*t m*to *thc v-csfo^sc 
pay. See i-P you tBY\ locate all the 
+o\rm datd you submitted• 


« o o 


The Starbuzz Bean Machine 
+ 0 http://starbuzzcoffee.com/processorder.php 


The Starbuzz Bean Machine 

Thanks, Buckaroo Banzai, for your order from the Starbuzz Bean Machine. 

Your order of 2 bags of ground House Blend, catalog included has been sent to: 

Buckaroo Banzai 
Banzai Institute 
Los Angeles 
CA t 90050 
310 555-1212 

and will be delivered by 2012-09-14. 
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html forms 


O 


o 



Stop right there. Do you 
think I didn’t see the way 
you slipped in that element name 
of 、、 extras []〃？ Whafs with those 
square brackets! You have to 
explain that. 


Believe it or not ， “extras[]” 
is a perfectly valid name for 
a form element. 

But even if it’s valid, it doesn’t exactly look 
normal, does it? Here’s the deal: from the 
perspective of HTML, this is a normal form 
element name; it doesn’t have any effect on 
the browser at all if it has square brackets in 
the name. 

So why did we use them? It turns out that the 
scripting language that the “processorder.php 
server script is written in (PHP) likes a little 
hint that a form variable may have multiple 
values in it. The way you give it this hint is to 
add on the end of the name. 

So, from the perspective of learning HTML, 
you can pretty much forget about all this, but 


you might just tuck this into the back of your 
mind in case you ever write a form that uses a 
PHP server script in the future. 


you are here ► 
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match the form names 



BE Bi 瞻總 

Below, you’ll find an HTML form, and on the ri^rf; the data a 
user entered into the form. Your job is to play like you’re the 
browser and match each form element name wt6x the values the 

user entered. After you’ve done the exercise, look 
at the end of the chapter to see if you matched up 
the form names widi the values correctly. 


<form action= n http :// www.chooseyourmini.com/choice.php" method= n POST n > 
<p>Your information : <br> 

Name : <input type="text" name="name" ><br > 

Zip : <input type=" text" name="zip"Xbr> 


</p> 

<p>Which model do you want? <br> 

<select name="model n > 


<option value="cooper">Mini Cooper</option> 

<option value="cooperS">Mini Cooper S</option> 

<option value="convertible">Mi n i Cooper Convert ible</option> 
</select> 


</p> 

<p>Which 

〈input 

〈input 

</p> 

<p>Which 

〈input 

<br> 

〈input 

</p> 


color do you want? <br> 

type="radio" name="color" value="chilired"> Chili Red <br> 
type="radio" name="color" value="hyperblue"> Hyper Blue 

options do you want? <br> 

type="checkbox" name="caroptions[]" value="stripes"> Racing Stripes 
type="checkbox" name="caroptions[]" value="sportseats"> Sport Seats 


<p> 

<input type="submit" value="Order Now"> 

</p> 

</form> 



fteire’s 七 he -Pov-rw. 
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html forms 


eee Choose your Mini! 

* ' http://www.chooseyourmini.com/ 


Choose your Mini Cooper 


Your information: 


Name: Buckaroo Ganzai 


Zip ： 90050 

Which model do you want? 

Mini Cooper Convertibk * 1 

Which color do you want? 

© Cm Red 
: Hyper Blue 

Which options do you want? 
^ Racing Stripes 
□ Sport Scats 


Submit 


hevVs 七 he -Po\rrw -Pilled out 



A 


^ 4 ^ daia 
With its hdr^c 3hd put Vouv 
^hswcirs hcv-c. 
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form methods: get and post 



Now that weve got the form 
finished, can we talk about the method 
the browser uses to send this data to the 
server? Weve been using POST, but you 
said there are other methods, too. 


There are two primary methods the 
browser uses: POST and GET. 

POST and GET accomplish the same thing — getting 
your form data from the browser to a server — but in 
two different ways. POST packages up your form 
variables and sends them behind the scenes to your 
server, while GET also packages up your form variables, 
but appends them on the end of the URL before it 
sends a request to the server. 


POST 



With POST, all the dd*ba is as pav-t 

f the v-c<\ucs*b is 'mvisiblc *to the user. 


The usev- just sees 
the SCV-VCV shifts 

URL \y\ hcv b\rowsc\r 

http : / /wickedlysmart. com/hfhtmlcss/contest. php addv-css bav-. 


GET 


the -fov-m da*ta is added h> the URL 

so *thc usc\r sees *thc -fo\rm 



tJobce the -foirm 
daia added or\ 

*to the of 

ihc URL. This 

is v/ha-t *thc 
usev- sees \y\ *thc 
address bav-. 


http : //wickedlysmart.com/hfhtmlcss/contest.php ? firs tname=buckaroo &1as tname=banz ai 
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html forms 


Watching ftET iw action 

There’s no better way to understand GET than to see it in action. 

Open up your “form.html” file and make the following small change: 

<form action= M http :// starbuzzcoffee.com/processorder.php" 


Just the method 
L u P0ST w -to 



method= n GET n > 


Save and reload the page; then fill out the form and submit it. You 
should see something like this: 




The Starbuzz Bean Machine 

Thanks, Buckaroo BaiuaJ, for your order from the Siarbu /2 Bean Machine, y 
Your order of 1 bag of ground Kenya, catalog included has been sent to: 


Buckarix) Banzai 
Banzai Institute 
Ijis Angeles 
CA. 90050 
3105551212 

Thank you for submitling vour comments to Starbu/v.! Wc love gettin/ comments 


http : //starbuzzcoffee.com/processorder.php ?beans=Kenya &beantype=ground& 
extras%5B%5D=catalog&name=Buckaroo+Banzai&address=Banzai+Institute&city 
Los+Angeles&state=CA&zip=90050&phone=3105551212&comments=Great+coffee 




Koy/ you Uy\ see cvevy -fovm 

3r\d values 

价七 \icvc \y\ URL. 


Notice thd-t "the bv-ov/sc\r cv\Codcs 
various dhav-ad-tev-s, like spades. The 
sc\rvc\r sdvipt v/ill auiomaiidally AttoAt 
these it v-cdcivcs -them. 



Dumb Quest! 


9 ns 


Why is it called GET if we’re 
sending something to the server? 

Good question. What’s the main job of 
a browser? To get web pages from a server. 
And when you are using GET, the browser 
is just going about getting a web page in the 
normal way it always does, except that, in 
the case of a form, it has appended some 
more data to the end of the URL Other than 
that, the browser just acts like it’s a normal 
request. 

With POST, on the other hand, the browser 
actually creates a little data package and 
sends it to the server. 


So why would I use POST over GET, 
or vice versa? 

There are a couple of big differences 
that really matter. If you want users to be 
able to bookmark pages that are the result 
of submitting a form, then you have to use 
GET, because there is no way to bookmark 
a page that has been returned as a result of 
a POST. When would you want to do that? 
Say you have a server script that returns a 
list of search results; you might want users 
to be able to bookmark those results so they 
can see them again without having to fill out 
a form. 

On the other hand, if you have a server 
script that processes orders, then you 


wouldn’t want users to be able to bookmark 
the page. (Otherwise, every time they 
returned to the bookmark, the order would 
be resubmitted.) 

A situation when you’d never want to use 
a GET is when the data in your form is 
private, like a credit card or a password. 
Because the URL is in plain view, the private 
information is easily found by others if they 
look through your browser history or if the 
GET somehow gets bookmarked. 

Finally, if you use a <textarea>, you should 
use POST, because you're probably sending 
a lot of data. Both GET and POST requests 
have a limit on the amount of data you can 
send, but the limit on a POST request is 
usually much larger. 
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test yourself: get and post 


^harpen your pencil 


GET or POST 

For each description, circle either GET or POST 
depending on which method would be more 
appropriate. If you think it could be either, circle 
both. But be prepared to defend your answers... 


GET 

POST 

GET 

POST 

GET 

POST 

GET 

POST 

GET 

POST 

GET 

POST 


A form for typing in a username and password. 

A form for ordering CDs. 

A form for looking up current events. 

A form to post book reviews. 

A form for retrieving benefits by your government ID number. 
A form to send customer feedback. 
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html forms 



Given everything you 
know about HTML 
and CSS, how would 
you approach styling 
this form? 
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deciding how to style the form 


Sharpen your pencil 

Forms are usu 


usually tabular in their layout, so you'll probably find that using a CSS table display 
layout works well for designing your form’s presentation...and that’s what we’ll use to lay out 
the Bean Machine form. With this table display layout, the page will look like a real form rather 
than a ragged collection of input elements, and it will be easier to read. 


Before we do that, let’s figure out the table structure that is inherent in this form. Starting with 
the sketch below, fit the elements into a table (hint: we found it fits nicely into 2 columns and 14 
rows), so each row is represented with a block element, and each cell is also represented with a 
block element. Notice you may have to add some structure to the HTML to make this work. 


No pcck'mj ai the page bc-Po\rc you do -the 
c^cv"fi.isc- Rcdlly/ Covcv i*t up ov* 
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html forms 


^harpen your pencil 


Forms are usually tabular in their layout, so you'll probably find that using a CSS 
table display layout works well for designing your form’s presentation...and that’s 
what we’ll use to lay out the Bean Machine form. With this table display layout, the page will look 
like a real form rather than a ragged collection of input elements, and it will be easier to read. 

Before we do that, let’s figure out the table structure that is inherent in this form. Starting with the 
sketch below, fit the elements into a table (hint: we found it fits nicely into 2 columns and 14 rows), 
so each row is represented with a block element, and each cell is also represented with a block 
element. Notice you may have to add some structure to the HTML to make this work. 


Here’s what v/c dame uf *to youv 

solu*tio 的 bc-Po\rC mov'mj oy\\ 


The labels -fo' 

clcruCht go ih 
the Ic-p-t dolum 

The ^ell values 
d\re all dl’13 灼 ed 
vcv-tidally *to 
the -top. 


The 匕 el I OY\ 

the vi 分七 

o( W Sliip 
{p 1 is empty ； 
"there’s no 
doirrbrol hcv-C- 


T\\t tell 
七 he 七 

七 he subwVt 
ku*b*to^ ,s 

cmftY* Treves 
灼 o label *to 
V\cvc- 



I 七 ， S a simple tabic 如 ㈣ 
^ i dolu^s a,d I^T 

-foVW. 


Wc^vc *tWovm all mpu 七 

dements m-fco the v-ijh-tha^d 

dolum^. 

that wc^vc gv-ouped eadk 
<>( ^kdkboxcs ahd v-adio 
but-fcohs ih*to ohC dell. 

Rcmc^bc\r that eddh Cc\\ 

^o\r\rcspohds h> a blodk c\c^i, so 
we II add some mo\rc <p> clcmchts 
■to r^akc su\rc wc'vc got a sepav-ate 
blodk element -fov- ea^h dell. 

>wcll also y\ttd some cx.-t\ra 
blodk elerwerrts (or 七 he v-oy/s. Well 
use <div> \us-t like wc 

did bc-fovc (\y\ Chapxcv II). 

well ^ccd ov\t dcrwch-t 
that do^-tams cvc\ry-tli*m^ -fov- the 
table itself. I/Vc Gh use ihc (o\rnx 

element -fo\r this/ 


Wc made -the it%i area bi^jev- *too| 
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structuring html for styling the form 


fretting the form elements into HTML 
structure for table display layout 

Now that you know how to organize the form elements in a table display layout, 
you need to put your HTML writing skills to the test. So get typing! 

Just kidding. We wouldn’t make you type all this.. .after all, this chapter is really 
about forms, not table display layout. We already typed this in for you; it’s in the 
file “styiedform.html” in the “chapter 14/starbuzz” folder. Even though it looks 
complicated, it’s really not that bad. We’ve added a few annotations below to point 
out the main parts. 


£0g> Ej Q 0] 

R 鄉 9 Ba 伸 

_ h 姆 


HevVs *tKc <-fov-m> element 

v/cVc (xom^ *t° uSC ^ ,s 
clement -fov- i\\t w taklc ， 
pav-*t cJc *tKc display. 


<form action= M http : //starbuzzeoffee.com/processorder.php" method="post M > 
<div class="tableRow M > ^ - 

<P> 



usihj a <div> with 
"Uie ^l^ss u *tcibIcRow ；， -Pov* 

從 h \row \ y \ -the -table- 


f[Y\d dorrteirrt -fo\r 匕 ell is 


value="whole"> Whole bean<br> 
value="ground M checked 〉 Ground 


Choose your beans : 

</p> 

<p> 

<select name="beans"> 

<option value="House Blend" >House Blend</option> 

<option value="Bolivia n >Shade Grown Bolivia Supremo</ option> 
<option value="Guatemala M >0rganic Guatemala</option> 

<option value= M Kenya n >Kenya</option> 

</select> 

</p> 

</div> 

<div class= M tableRow M > 

<p> Type: </p> _ nested inside a <f> dement- 

<P> ^ - 

<input type= n radio" name= n beantype 

<input type= n radio" name= n beantype 

</p> 

</div> 

<div class="tableRow M > 

<p> Number of bags : </p> 

<p> <input type= n number n name= n bags" min= 

</div> 

<div class= n tableRow label’▼> 

<p> Must arrive by date : </p> 

<p> <input type= n date" name="date"> </p> 

</div> 

<div class= n tableRow n > 

<p> Extras : </p> 

<p> 

<input type= n checkbox" name= M extras[] 

<input type= n checkbox" name="extras[] 

Include catalog with order 

</p> 

</div> 




max="10 n > </p> 



Fov bea 灼 sclcttior^ w bcar>*typc rad\o 

bu*t*tov>s, ar^d i\\t “extras” dKctkbo^cs, v/c put all 
七 he clcmcr\*U -fov cadii ir> oY\t 乙 ell. 

1 value= n giftwrap"> Gift wrap<br> 

'value="catalog" checked 〉 


Code dorrtmucs oh the 的 e 乂 *t pajc- 


684 Chapter 14 










html forms 


the, v*ow ^oirrtolihih^ jus*t the label 
“Ship "to' wc'vc added a dass u hcadmg w -to 
the <p> so we t^t\ bold this -text 


£©g> (EB Q 6)1 

R 鄉 9 Ba 伸 

H 姆 



name="name n value= n n > </p> 


All the V-OV/S av-c 
y s*braijh*tfov"wav"d: a 


name= n address，' value=""> </p> 


*tablcRov/ W <div> -Pov *thc 

\row, eddh 匕 ell in a <f>- 


name="city n value= nn > </p> 


name="state" value= nn > </p> 


<div class= M tableRow M > 

<p class: ， 'heading▼，> Ship to </p> Notice that v/C^vc also yt a 的 erwp-ty dell 
<pX/p> m -the v-ijh-t so we jusi fut a 灼 

</div> empty <p> element hcv-c- 

<div class="tableRow n > 

<P> Name : </p> 

<p> <input type= n text 
</div> 

<div class="tableRow n > 

<p> Address : </p> 

<p> <input type= n text 
</div> 

<div class= M tableRow M > 

<p> City : </p> 

<p> <input type= n text 
</div> 

<div class="tableRow n > 

<p> State : </p> 

<p> <input type= n text 
</div> 

<div class= M tableRow M > 

<p> Zip : </p> 

<p> <input type= n text 
</div> 

<div class= M tableRow M > 

<P> Phone : </p> 

<p> <input type= n tel" name= n phone n value= nn > </p> 

</div> 

<div class="tableRow M > 

<p> Customer Comments : </p> 

<P> 

<textarea name="comments" rows= n 10 

</p> 

</div> 

<div class= M tableRow n > 

<px/p> 

<p>〈input type= n submit” value= M Order Now n > </p> so 3^3 m, 广 1 A P Y 

</div > U 


name= n zip" value=" n > </p> 


cols=" 48 n X/textarea> 


-fov last voy/, 七 

a 於 cmfby tell *m *tKc lc-f*b dolum^ 


</form> 
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styling the form 


Styliwg the form with CSS 


£0g> Ej Q 0] 

—C§S 


We’ve got all the structure we need, so now we just need to add a few styling rules 
and we’ll be done. Because this form is part of the Starbuzz site, we’re going to 
reuse some of the style in the “starbuzz.css” stylesheet, and create a new stylesheet, 

“styledform.css”，to add new style rules for the Bean Machine form. All of this CSS 
should be familiar to you now. We’re not using any rules unique to forms; it’s all 
just the same stuff you’ve been using in the last few chapters. 

You’ll find this CSS in the file “styledform.css” in the folder “chapter 14/starbuzz”. 

1/VcVe —5 吟咖如 Stavbuz^ CSS ^ some <j 
our style, Wt wcVc addmj Starbuzz batkyou^d 
“ay, and a marj'm -to body. 


body 


background : #efe5d0 url(images/background.gif) top left; 
margin : 2 Opx; 


form { 

display : table; 
padding : 1Opx; 

border : thin dotted #7e7e7e; 
background-color : #elceb8; 



VVcVc usm^ -fovm *fco 

•tabic m display... 

...Bv\d a bo\rdcv av-ou^d -the -fov-m, 

some -fo\rm 

the bov-dev-, Bv\d a ba^kyou^d dolov- -to 
o^-fset i*t -fvom ba^kjv-ou^d- 


form textarea { 
width : 50Opx; 
height : 20Opx; 


div.tableRow 
display : 


table-row; 


div.tableRow p { 

display: table-cell; 
vertical-align : top; 
padding : 3px; 


div.tableRow p : first-child { 
text-align : right; 


p.heading { 

font-weight: bold; 


WcVc mak'm^ *tKc it%iarca to^-tvol *m *tKc 
<Povm bi^cv> so *t^c\rc s move room -fov 
by sett’nr^ rts Wid*tK ^Y\d 


7 ^ "-taklcRo^ <dw> atls as a ⑽ m 

T i\\t -table disflay laYout 



Ba^h <p> dcmc^i that is nested *m a u -bblcRow w 
<div> is a iablc ^cll. Wt vertically alijh ihe Co^i 
ih <p> so "the ^or»*tch*t ih eddh vow Imcs up 
■the -top of the tells. Md wcVc dddi^j a bii o( 
paddmg hc\rc {oo, -to add syact bc-twcch -the v-ows. 


This vulc uses "tilC -f ivst—dKlId pseudo— OY\ "the sclcd'tov 
^OV <f> clcmcy>*ts nested msidc W *tablcRoy/ W <d’iv>s. This 你撕 s 
七 he *(Vst <f> clcrwci^*t m v-oy/ is aliped *to so 

all Tmc uf vcirtidally a^a'mst -tKc h 吵七 side of 七 k 乙。 1_ 的 . 

A^d (or a^y <p> elements wi-th -the tUss w hcad*mg w , v/c bold -the 
•tcx.-t so it looks like a hcadrnj- IVc use this *m *thc w Ship "tc/’ 匕 ell. 
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Test drive the styled form 


You’re going to add two <link> elements to the <head> of your 
HTML in “styledform.html”，linking in the Starbuzz stylesheet from 
Chapter 12, “starbuzz.css”, and your new stylesheet, “styledform.css”. 
Make sure you get the order correct: link the “starbuzz.css” file first, 
then the “styledform.css”. Once you’ve got the two stylesheets linked, 
save and reload your page. You should see the snazzy, styled version 
of the Starbuzz Bean Machine in your browser. 




av>d sk\IU a see you 
w add 払 c S-tavkuzi V^cadcv a^d 
^ooitc bo MatWmc pay 

扣 d make 七 Uca 於 MatWmc look 

yrcally ^ 七 Wc elements. 


Wow, what a difference a little style makes! 


TKc labels avc 
aliped Vi 七七 he 
*tof of *thc -fovm 
clcmcir>*ts> 

-tiicyVc aliyedl *to 
vi^vt as y/cII- 

TKis 

makes ii cas'icv *to 
sec v/hith labels 
belor>^ >wh*idK 
£.ov>*tv*ols. 


丁 he between 

the \rows makes ^ 

big d\((^tv\U av\d 

^kes the -Po\rrw 
rwu 亡 h casic\r "to v-cad- 


TV^C MatWrnc ^ 

七 k oUk s.-te fee 七 W. 



Tk w S^if V 
Kcadm^ is bold, 

\ust like v/c v/a^*tcd- 


l/Vc^vc 3 。七 two dolum^s a 灼 d all the do 灼七⑶ 七 m 七 he v-ov/s I'mcs uf widely! 
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forms and accessibility 


A word about accessibility 


seated a Complete version 

ic 0 ( Bca^ 如必 labels, 

dy\d updated {Mt CSS -to y> >wi*bii 
it CV^k OIA 七 ad^ss-Po\rm.li*tml 


So far we’ve been labeling our form elements with simple text, but we should 
really be using the <label> element to mark up these labels. The <label> 
element provides further information about the structure of your page, allows 
you to style your labels using CSS more easily, and helps screen readers for the 
visually impaired to correctly identify form elements. 


and 3 ^^CSS-fo\rm.£.ss m Code 
downloads. 


use a <labcl> clcnr»ch*t, -Piirs-t add 扣 

V-rw clcrwc^t 




<input type="radio" name= M hotornot M value="hot" id= n hot M > 
〈label for= M hot">hot</label> 



f :、 hot 


<input type= M radio" name= M hotornot M value= n not" id="not M > 
〈label for= n not">not</label> 


id= n not"> 



TliCh ddd 3 <l3bcl> set i"ts u -(*o\r W 
aiivibuic -to 七 he domspor>d'mg id- 


Now "the "to these 

v^dio bu*bto 灼 s is a label- 


By default, labels don’t look any different from just normal text. However, they can 
make a big difference when it comes to accessibility. You can use the < label 〉 element 
with any form control, so we can add a label to each part of our Bean Machine form. 
For instance, we could add a label to the number input for the number of bags like this: 

<label for= n bags M >Number of bags : </label> 

<input type= n number n id= M bags M name= n bags n min= M l n max= M 10 M > 



When you add labels to radio or checkbox controls, remember that the id of each 
control needs to be unique, even though the name of all the controls in a group is the 
same. So, to add labels to the “beantype” radio control in the Bean Machine, create 
unique ids for both the whole and ground options: 


Vv 二 Vm, /vC lr\^\4-U 丄 __ J_. __ 、‘ 



<input type="radio" id= n whole 一 beantype” name= n beantype" value="whole M > 

<label for= n whole_beantype">Whole bean</labelXbr> 

<input type="radio" id= n ground— beantype” name="beantype" value="ground" checked 〉 
<label for= n ground_beantype n >Ground</label> 
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What more could possibly go into a form? 

We’ve covered just about everything you’ll regularly use in your forms, but there are 
a few more items you might want to consider adding to your form repertoire. We’re 
including them here just in case you want to take your own form studies even further. 


Fieldsets and legends 

When your forms start getting large, it can be helpful to visually group 
elements together. While you might use <div>s and CSS to do this, 
HTML also provides a <f ieldset> element that can be used to 
group together common elements. <f ieldset> makes use of a second 
element, called <legend>. Here’s how they work together: 


Tk <(\t\Ast{> su^o^ds a Thc <(c3 ^ d> pv . ovidcs a 

set J label -fov- the gv-oup. 

<fieldset> 

<legend>Condiments</legend 〉 

<input type="checkbox M name="spice" value= n salt n > 
Salt <br> 

<input type="checkbox" name="spice" value="pepper M > 
Pepper <br> 

<input type="checkbox M name="spice" value= n garlic M > 



Garlic 

</fieldset> 


-Condiments 

空 Salt 
^ Pepper 
□ Garlic 



Here’s how the -ficldsct 
look'm oy\c 
b\rowscv-. You’ll -fmd 
that b\rowscv"s display 
them di-f-fc\rc^*bly. 


Passwords 

The password <input> element works just like the text <input> 
element, except that the text you type is masked. This is useful 
for forms that require you to type in a password, a secret code, or 
other sensitive information that you may not want other people to 
see as you type. Keep in mind, however, that the form data is not 
sent from the browser to the server script in a secure way, unless 
you make it secure. For more on security, contact your hosting 
company. 

〆 一 ^^ The password <mput> element v/oirks 
^ like -the element 

<in P ut type=»password» name=-secrete the you type is masked- 
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other form elements 


More things that can go in a form 

File input 

Here’s a whole new input element we haven’t talked about. If 
you need to send an entire file to a server script, you’ll once 
again use the < input 〉 element, but this time set its type to “file”. 
When you do that, the <input> element creates a control that 
allows you to select a file and — when the form is submitted — the 
contents of the file are sent with the rest of your form data to the 
server. Remember, your server script will need to be expecting a 
file upload, and also note that you must use the POST method to 
use this element. 



Choose File 


Browse", 


Weil’S whai the -file ihpu-t 
looks like m a Couple 
d\Hcvey\i b^owsev-s. 


<input type= n file" name="doc"> 



To dv-ca*tc a -file mpu 七 element ； just sc 七 the 
type o( the *to w -filc w . 


Multiple selection 

This isn’t an element, but rather a new way to use an element 
you already know. If you add the Boolean attribute multiple to 
your 〈 select 〉 element, you turn your single-choice menu into 
a multiple-choice menu. Instead of a pop-down menu, you’ll get 
a multiple-choice menu that shows all the options on the screen 
(with a scroll bar if there are a lot of them); you can choose more 
than one by holding down the Ctrl (Windows) or Command 


multiple 
sclcdtioh, you 

乙 choose 

thah OhC optioh 
3 七 a tir^c. 


Buckaroo Banzai 
Perfect Tommy 
Penny Priddy 
Ne w J ersey 
John Parker 


(Mac) key as you select. 


<select name= M characters" multiple 〉 

<option value= M Buckaroo">Buckaroo Banzai</option> 
<option value= M Tommy">Perfeet Tommy</option> 
<option value="Penny Priddy M >Penny</option> 
<option value= n New Jersey">Jersey</option> 

<option value= M John Parker M >John</option> 


</select> 


Jus*t add *thc a*t*bv-ibu*tc 

multiple *to tum a smjlc 

mtYWA m*to 3 multiple 
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Placeholder 


You can use the placeholder attribute with most of the 〈 input 〉 
types in a form to give the person who’s filling out the form a 
hint about the kind of content you expect him to enter into the 
control. For instance, if you have a text field that expects a first and 
last name, you can provide a sample first and last name using the 
placeholder attribute. The value in the attribute is shown in the 
control, but is fainter than normal content that you add to a control, 
and as soon as you click into the text field, the placeholder text will 
disappear so it doesn’t get in the way of what you’re typing. 


Name: 


you leave this -field bla^k av\d 
subrwi-t -the -Poirirh, the 
^Oh-tch-t is HOT submitted as -the 
value -Po\r the Coy\bro\l 





<input type= M text" placeholder: n Buckaroo Banzai n > 


The placeholder attribute allows you 
*bo provide B hm 七 about the kmd 

o-f 乙 o 灼 *tc 灼 *b youVc m this 

o-f the -fov-m. 


Required 

This is an attribute you can use with any form control; it indicates 
that a field is required, so you shouldn’t submit the form without 
specifying a value for the controls that have this attribute set. In 
browsers that support this attribute, if you try to submit the form 
without specifying a value for a required field, you’ll get an error 
message and the form will not be submitted to the server. 


Notice that this attribute is another Boolean attribute, like we saw in 
the <video> element. That just means that the value of the attribute 
is simply “there” or “not there.” That is, if the attribute’s there, then 
it’s set, and if the attribute’s not there, then it’s not set. So in this 
example, required is there, so that means the attribute is set and 
the field is required to submit the form. 


Name: 


Buckaroo Banzai 


Submit 


B Please fill out this field, 


"rpis is a -p\rom Chv-omc. M 

o*f "this w\ri*tih^ hot all bv"ov/scV"S support 
\rMuiv-cd, but you put it anyway. 
You II be able io submit the but thch 
6 ou\tsa the sc\rvc\r st^i will domplaih 
that you haWt -Pilled ih the -field. 

v-c^uivcd is a Boolean attv-ibu-tc, so i-f it's m 
•the -foirm that the must 

have B value -fov -the -fo\rm -to submi-t 


<input type= n text" placeholder= M Buckaroo Banzai" 


required 〉 







Edit your “styledform.html” file and add placeholders to each of the text <input>s and the tel <input>. Choose 
values that will give the customer a good hint about what kind of content is expected in each field. 

Next, edit the same file and add the required attribute to each form field that is required by the Starbuzz Bean 
Machine (all the “Ship to” fields). Because beans and beantype have default values, do you really need required 
on those fields? What happens if you remove the checked attribute from beantype; do you need required then? 
Experiment with different browsers and see which browsers support placeholder and required. 
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BULLET POINTS - 

■ The <form> element defines the form, and all form 
input elements are nested inside it. 

■ The action attribute contains the URL of the 
server script. 

■ The method attribute contains the method of 
sending the form data: either POST or GET. 

■ A POST packages form data and sends it as part 
of the request. 

■ A GET packages form data and appends it to the 
URL 

■ Use POST when the form data should be private, 
or when it is large, such as when a <textarea> or 
file <input> element is used. 

■ Use GET for requests that might be bookmarked. 

■ The <input> element can act as many different 
input controls on the web page, depending on the 
value of its “type” attribute. 

■ A type of “text” creates a single-line text input. 

■ A type of “submit” creates a submit button. 

■ A type of “radio” creates one radio button. All radio 
buttons with the same name make up a group of 
mutually exclusive buttons. 

■ A type of “checkbox” creates one checkbox 
control. You can create a set of choices by giving 
multiple checkboxes the same name. 

■ A type of “number” creates a single-line text input 
that expects numeric characters only. 

■ A type of “range” creates a slider control for 
numeric input. 

■ A “color” type creates a color picker in browsers 
that support this type (and a text input otherwise). 

■ A “date” type creates a date picker in browsers 
that support this type (and a text input otherwise). 


■ The “email”, “url”, and “tel” types create single- 
line text inputs that cause custom keyboards to 
appear on some mobile browsers for easier data 
entry. 

■ A <textarea> element creates a multiline text input 
area. 

■ A <select> element creates a menu, which 
contains one or more <option> elements. 

<option> elements define the items in the menu. 

■ If you put text into the content of a <textarea> 
element, it will become the default text in a text 
area control on the web page. 

■ The value attribute in the text <input> element can 
be used to give a single-line text input an initial 
value. 

■ Setting the value attribute on a submit button 
changes the text of the button. 

■ When a web form is submitted, the form data 
values are paired with their corresponding names, 
and all names and values are sent to the server. 

■ CSS table display is often used to lay out forms, 
given that forms have a tabular structure. CSS 
can also be used to style the form’s color, font 
styles, borders, and more. 

■ HTML allows form elements to be organized with 
the <fieldset> element. 

■ The <label> element can be used to attach labels 
to form elements in a way that aids accessibility. 

■ Use the placeholder attribute to give the form user 
a hint about the kind of content you expect in a 
field. 

■ The required attribute indicates a field is required 
for the form to be submitted correctly. Some 
browsers will force you to enter data into these 
fields before submitting the form. 
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Markup Magnets Solution 


Your job was to take the form element magnets and lay them on 
top of the corresponding controls in the sketch. You didn’t need 
all the magnets below to complete the job; some were left over. 


Here’s our solution. 


<select> ••.<select> 





[<input type 二 ’'radio’’ •. 


^ — ， . 如 ■t~wr^= n radio” ...〉 

| •匕 ^J ^ ^ 




Shade 与 ' rov J— 


Wlc didn't 

r\ttA these- 



Must arrive by 


Extras ： 

□ fy(i 

E) Include 

SKip *bo ： 
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exercise solutions 


BE th^ §©lug©n 



name = 

: "Puckaroo Pawzai" 

zip = 


model 

= u dohVe\rtiblc W 

color 

= 

caroptions [ ] = u s-t\ripcs , 


Sharpen your pencil_ 

Solution GET or POST 

For each description, circle either GET or POST 
depending on which method would be more 
appropriate. If you think it could be either, circle 
both. But be prepared to defend your answers... 


GET 

GET (gOS3> 
(GEt) POST 
GET (POST) 
GET 

GET (^OS)) 


A form for typing in a username and password. 

A form for ordering CDs. 

A form for looking up current events. 

A form to post book reviews. 

A form for retrieving benefits by your government ID number. 
A form to send customer feedback. 
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html forms 



Hey, 80% of our customers 
order ground beans. Can you 
make it so the ground bean type 
is already selected when the 
user loads the page? 


If you add an attribute called checked with a value of "checked” 
into your radio input element, then that element will be 
selected by default when the form is displayed by the browser. 
Add the checked attribute to the "ground” radio <input> 
element and give the page a test. Here’s the solution. 



Wtrcs just i\\t v-clcvav>*t 
af -foVm m W -foVm.K'tw'l - 



<form action= n http : //starbuzzcoffee.com/processorder.php" method:，▼ POST n > 


<p>Type : <br> 


<input type="radio" name= n beantype M value="whole M > Whole bean <br> 
<input type= M radio" name= n beantype M value= n ground" checked 〉 Ground 


</p> 

• • • 

</form> 


^y\A heve’s 七 he ir>cv/ 

selects 七 he w ^vouy>d > 



radio bu*t*tov>. 
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Wouldnt it be dreamy if this 
were the end of the book? If there 
were no bullet points or puzzles or 
HTML listings or anything else? But 
thafs probably just a fantasy... 


Congratulations! 

You made it to the end. 


Of course, there’s still an appendix. 
And the index. 

And the colophon. 

And then there’s the website... 
There’s no escape, really. 
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考 


The Top Ten Topics ^ 
(We Didn，t Cover) 



We covered a lot of ground, and you’re almost finished 

With this book. We’ll miss you, but before we let you go, we wouldn’t feel 
right about sending you out into the world without a little more preparation. We 
can’t possibly fit everything you’ll need to know into this relatively short chapter. 
Actually, we did originally include everything you need to know about HTML and 
CSS (not already covered by the other chapters), by reducing the type point size 
to .00004. It all fit, but nobody could read it. So, we threw most of it away, and 
kept the best bits for this Top Ten appendix. 


this is a new chapter 
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specialized selectors 


More CSS selectors 

While you’ve already learned the most common selectors, here are a few 
more you might want to know about... 


Pseudo-elements 

You know all about pseudo-classes, and pseudo-elements are similar. 
Pseudo-elements can be used to select parts of an element that you can’t 
conveniently wrap in a <div> or a <span> or select in other ways. For 
example, the : first-letter pseudo-element can be used to select the first 
letter of the text in a block element, allowing you to create effects like initial 
caps and drop caps. You can use the : first-line pseudo-element to select 
the first line of a paragraph. Here’s how you’d use both to select the first 
letter and line of a <p> element: 


p : first-letter { 

font-size : 3em 


WtYt y/cVc 七 he ivs 七 

av\d ike -fi\rst TmC italic* 


p : first-line { 

font-style : italic; 



Pscudo-dcrwChts use the 
Bs pseudo—classes. 


Attribute selectors 


Attribute selectors are exactly what they sound like: selectors that 
allow you to select elements based on attribute values. You use them 
like this: 



Tiiis seled*ts all 

images have a Vid*tK 
atbribu 七 e m *tKc'iv HTML. 


img[width] { border : black thin solid; } 
img[height= n 300'▼ ] { border : red thin solid; } 
image [alt~= n flowers▼▼ ] { border : #ccc thin solid; } 



This sclcdx>\r sdet-b a\\ ir^a^es 
"tha-t have al-t a-ttv-ibu-tc th 


This sclc^-toir selects all ，” 
ihsi have a height atthbut 
a value of Zoo. 


ages 


that 


i^ludcs the wov*d u -flowcv*s w . 
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Selecting by siblings 


You can also select elements based on their preceding sibling. For example, say you want to select 
only paragraphs that have an <hl> element preceding them, then you’d use this selector: 


Wvrtc *thc ⑶ 七 , d + (flus siy>), 

ar\d ⑶ *tv>c s'lbl'mg element 



hl+p { 

font-style : 



italic; 


This sclcd*tov sclcdis all paayafhs 七 hai 
Const immed'idiely ay> <hl> element 


Combining selectors 

You’ve already seen examples of how selectors can be combined in this book. For instance, you 
can take a class selector and use it as part of a descendant selector, like this: 


.blueberry p { color : purple; 


^ Hcvc v/cVc sclcdtm^ all pav-ayapiis 

/ 七 ha 七 ave dcsdcir>dair>*b o\ clcmcir>*t 
•m 七 he blucbcvv-y dlass. 


There’s a pattern here that you can use to construct quite complex selectors. Let’s step through 
how this pattern works: 

o Start by defining the context for the element you want to select, like this: 

\/ """v/cVc usm^ d dcs£.cir>d3ir>*t sdcd'tov' 
div#greentea > blockquote d <dW> w*i*tK id 

be fav-cir>*t of <blodk^uo*tc>- 




Then supply the element you want to select: 


div#greentea > blockquote 

- 




> 


>wc add -the <p> clcmcy>*t as -the element 
vjC >w3y>*t *to select m 七 he o( 七 he 

<blodk^uo*tc>. The <p> clem ⑶七 mus 七 be a 
dcsdcr>dar>*t o( <blotk<\uo*tc>, mus*t be d 

dh'ild of B <div> y/rth 扣 id J w ^vccr>*tc 3 - 


Then specify any pseudo-classes or pseudo-elements: 


div#greentea > blockquote p : first-line { font-style : italic; 



doy>*tc%*t 


ThaVs a <\u*rtc domflex. sclcd*to\r| Feel 
-Pv-cc *to doy>s*tvut*t youv o^iy\ sclcd*tovs 
usm^ *tKis sdmC method. 




3 


VJC 
st\td or! 
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properties on the cutting edge 


Vcwdor-specific CSS properties 

The browser makers (in other words, vendors like Microsoft, Mozilla, the 
folks behind WebKit, and so on) often add new functionality to their 
browsers to test new features, or to implement CSS extensions that are 
being considered, but aren’t yet approved by the standards bodies. In these 
cases, vendors create CSS properties that look like this: 


u W 


七 3 Abs\\ — 



A^othcv- dash 


moz-transform 



The VCy>do\r hcv-c, 

iVs W mo2. W -fov* /l/lozilla 



The pv-opev-ty 


You should feel free to make use of these vendor-specific properties, but 
they aren’t necessarily intended for use in shipping products — the property 
may never be approved as a legit standard, or the vendor may change the 
implementation of the property at any time. That said, many of us need to 
be able to create pages that use the latest and greatest technology, but do so 
knowing that you’re using properties that may change. 

If you’re going to make use of these properties, then often you’ll create CSS 


that looks like this: 


div { 

transform: 


rotate(45deg); 


m tasc \i su^o\rtcd, o\r yts 
su^o^rted m 认代 . 


-webkit-transform : rotate (45deg) ; Sa-fav-i f Chv-omc 

-moz-transform: rotate (45deg) - Mozjlla 

-o-transform: rotate(45deg); 

-ms-transform: rotate(45deg); 



^ Thch wc list the 
khoy/h vchdov— 
spcdi-Pid vevsiohs. 


You can typically find these vendor-specific properties in the developer 
documentation and release notes for each browser, or by participating in the 
forums associated with each browser’s development process. 

And, if you’re wondering what the transform property really does, check out 
the “#3 CSS transforms and transitions” section on the next page. 
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CSS transforms awd trawsitiows 

Using CSS, you can now do full-blown 2D and 3D transformations on 
elements. Rather than talk about it, let’s look at an example (type this 
one in; it’s worth it!). 


<!doctype html> 
<html> 

<head> 


<meta charset= n utf-8 M > 

<title>CSS Transforms and Transitions</title> 

〈 style 〉 ^ - Hcv-c^s *thc bds'id style -fov 

#box { w bo% w <d*iv> belov/ … 


position : absolute 
top : lOOpx; 
left: lOOpx; 
width : 200px; 
height : 200px; 



The position is absolute 七 y ou y ou 

y/rtV> us all ihvou^V) 七 ha 七 fosrtio 灼叫 dKapicv-?). 

let's Jive 七 he <div> a position artd s\zjt... 


background-color : red; 


rwakc rt V*cd. 


TWis Will 0^7 
wovk … I 奶 +. 


#box : hover { 

transform: rotate(45deg); 

-webkit-transform : rotate(45deg) 
-moz-transform: rotate(45deg) 

-o-transform: rotate(45deg); 

-ms-transform: rotate(45deg); 


This siylc vulc applies OMLY i-f <dw> U 
•m *tv>c hovcv- sta*tc...ycs, you Uv\ hovcv ovcv 
<d*iv>s boo[ 

、 ； W\\tY\ youVc hovcv-'mj youv- mouse over ihc 
一 we "tv 3 ^s-fo\rrw "the dcrwCht by 

七午弓 dcjv-ccs. 

Wfe s*ti|| v\ccd bvowsev*—spedi-fifi. -Pov* "these- 


</style> 


</head> 

<body> 

<div id= n box M X/div> 
</body> 

</html> 


ttevVs <d'iv> v/cVc 

*brd 灼 s*fov*mnr>3. 


Go ahead and type this in and then give it a test drive. 
When you pass our mouse over the “box” <div>, you 
should see it transform so that it is rotated by 45 degrees. 
Now, what if we want to make that transformation 
smooth with a nice animation? That’s where transitions 
come in. • .so, turn the page. 


Mouse ovcv <dw> 
{jo see \i vo-ta-tc! 
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css transitions and transforms 


We can add the transition property to the “box” <div> rule to have it 
transform to its new state over two seconds. Here’s how we do that: 


#box { 


position : absolute; 
top : lOOpx; 
left: lOOpx; 
width : 20Opx; 
height : 200px; 
background-color : red; 



TKc says ： w |^ value iKc 

pvofcvty *bra 於 si 七 -fvom duvvcy>*t value or -tv-a^s-tov- 

*to r^cv/ value *tvair>s-fovrw ovcv {\\t sfcdi-ficd duva*tior>. 


transition : transform 2s; 

-webkit-transition : -webkit-transform 2s; 
-moz-transition: -moz-transform 2s; 
-o-transition : -o-transform 2s; 

} 

#box:hover { 

transform: rotate(45deg); 

-webkit-transform: rotate(45deg); 

-moz-transform: rotate(45deg); 

-o-transform: rotate(45deg); 

-ms-transform: rotate(45deg); 



The dc-fault value o-f is 

*bha*t is, is y\o *tv*a^s-fo\rw\. 

Bu 七 you hovcv- you\r mouse ovcv 

■the \)o%, *thc value ok *tv-a^s-fo\rw\ is 
匕 hatred *to a ^-dcjv-cc \rotatio^. So 
the *tv-a^si*tio^ *(Vo 你灼 o *to 3 

v-o-tatio^ *bv*a^s-fo\rw\ happens 
ovcv- *bwo sedo^ds. 


The value of the transition property is another property, in this case 
transform, and a duration, in this case two seconds. When the value of 
the specified property changes, the transition causes that change to happen 
over the specified duration, which creates an animation effect. You can 
transition other CSS properties too, like width or opacity. 


IE ^umhtly (as o( 

vc\rsioh has y\o supj>ov-t 
(ov tvahsi-tioh, but mdy 
ih vcvsioh lO. So you 
woh "t see "the 
i( you’ve usm^ |E. 



Tv/o scdor>ds 
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# 4 Interactivity 

HTML pages don’t have to be passive documents; they can also have content that is executable. 
Executable content gives your pages behavior. You create executable content by writing 
programs or scripts using a scripting language called JavaScript. Here’s a little taste of what it 
means to put executable content into your pages. 


<script> 

window.onload = init; 
function init() { 


a ttTAIL <sd\rif*t>> v/iVidh 

allows you *to flade CoAt vi^rt msidc o\ HTML. 


WcVc us'm^ id o( the -fo\rr»> 

*to yt a handle *to -the -fov-m m 
JavaSdv-ift SO y/C CBy\ do wi*th 
i*t, like dc-f mc wha 七 happens wlic^ a 

butt © 灼 is dl'idked- 


var submitButton = document.getElementByld("submitButton"); 
submitButton•onclick = validBid; 



function validBid() { 

if (document. getElementByld. ("bid.") . value > 0) { 
document. getElementByld (" theForm") . submit () 
} else { 

return false 


a bi*t JavaStvift 七 ha 七 

dV^ctks d user’s bid *to r^akc SUVC iVs 
y>o*t z^cv-o dollavs or less. 



l-p the bid is g\rc«|-tc\r O, 
submit the -fov-m ； o*thcv*wisc ; wc (Jok /七 
bemuse it’s c\r\rov-. 


</script> 


Th ⑶ m ttT/\/IU you da 的 trtaic a -fov-m -that uses this S^\rif*t bo dhcdk the bid bc-fov-c the 
•form is submitted. |-f the bid is mo\rC zj^ro, the -fo\rm jets submitted. 

<form id="theForm" method= n post M action= M contest.php M > 

<input type= M number M id="bid n value= n 0 n Xbr> 、 

<input type= M button" id= n submitButton” value: n Bid! n Xbr> 

</form> 


jh JavaS^ipt wc At^t what happen whch 

is dided, a^d yi iht value 
the ihput with the id o( “bid” 



What else can scripting do? 

Form input validation, like we did above, is a common and useful task that is often done with 
JavaScript (and the types of validation you can do go far beyond this example). But that’s just 
the beginning of what you can do with JavaScript.. .as you’ll see on the next page. 
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other html5 goodies 


Interact with your pages in new ways that 



LOS ANGELES 
LOS ANGELES 


巧 HTML5 APIs and web apps 


work for the desktop and mobile devices. 


fk f>rs 


Fractal Explorer 


In addition to the elements that HTML5 adds, HTML5 
comes with a whole new set of application programming 
interfaces (APIs for short) that are accessible through JavaScript. 
These APIs open up a whole new universe of expression and 
functionality to your web pages. Let’s look at just a few things you 
might do with them … 


With HTML5 APIs and JavaScript, you can 
create a 2D drawable surface right in your 
page; no plug-ins required. 


No need for special 
plug-ins to play video. 


Create your own video 
playback controls 
using HTML and 
JavaScript. 


Use web workers to turbo-charge your JavaScript 
code and do some serious computation or make your 
app more responsive. You can even make better use of 
your user's multicore processor! 


Access any web service and 
bring that data back to your 
app, in near real time. 


Cache data locally using 
browser storage to speed 
U P mobile apps. 


Make your pages location- 
aware to know where 
your users are, show them 
what's nearby, take them 
on a scavenger hunt, give 
them directions, to bring 
people with common 
interests together in the 
same area. 


Integrate your pages with 
Google Maps and even 
let your users track their 
movement in real time. 
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Store lots of preferences and data 
for your users locally, in the brows 
and even make it available for offl 
access. 


Wash the 


The browser's clearly not just for 
boring documents anymore. With 
JavaScript, you can draw pixels 
directly into the browser. —^ 


麵 


jrih 


Motivated yet? 

You’ll find all these 
examples in our book 
Head First HTML5 
Programming. 
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dealing with web fonts 


# 6 More on Web Fowts 

We would have liked to have spent a lot more time on Web Fonts, so they ended up 
making our “10 things we didn’t cover，’’ even though we did cover them. If you’re 
using Web Fonts, there are a few more things you should know and investigate, so 
we’ve put together a top 10 of things you should know about Web Fonts: 


1 . 

2 . 

3. 

4. 


5. 

6 . 


8 . 

9. 

10 . 


There are services that help take the pain out of using Web Fonts, like Google 
Web Fonts (http : // www. google . com/webfonts), Fonts.com (http : // www. 
fonts . com/web-fonts), and Extensis (http : / /www. extensis . com/). 

Browsers behave differently while they download your fonts. Some browsers 
display a backup font, while others wait for the font to be downloaded before 
rendering the text. 

Once you’ve downloaded a font, it is cached by your browser and not retrieved 
again the next time you encounter a page that uses it. 

All modern browsers (IE9+) support the Web Open Font Format (WOFF), 
which is likely to become the Web Font standard. However, Internet Explorer 
up through version 8 supports a font standard different from all other modern 
browsers (.eot), and has a bug that prevents the browser from loading multiple 
fonts (so you can’t just list more than one font in your @f ont-face rule). If you 
need to support Web Fonts on IE8 and earlier, the services mentioned above 
can insulate you from having to worry about these cross-browser compatibility 
issues. 

There are many free fonts out there. Look for “open source fonts” to find fonts 
you can include in your web page for free. 

Because Web Fonts are real fonts, you can apply any styling to them just like 
you can to conventional fonts. 

Using Web Fonts can have some impact on the performance of your 
page, but is considered a better practice and will typically provide bette 
performance than using custom graphic images for typography. 

Limit the fonts in your @font-face rule to only the fonts used on a 
particular page. 

If you have existing font licenses, check with your vendor; they may 
allow web usage. 

As with conventional fonts, always include a fallback font in case your 
page’s font isn’t available or an error is encountered retrieving or 
decoding it. 
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# 7 Tools for creating web pages 


Now that you know HTML and CSS, you’re in a good position to decide if tools like 
Dreamweaver, Expression Web, or Coda are for you. Some of these applications give you much 
richer editors with features like code coloring and built-in preview to make creating and editing 
your HTML and CSS easier. Some of these applications provide what-you-see-is-what-you- 
get (WYSIWYG) tools for creating web pages; we’re sure you know enough about HTML and 
browser support to know that this goal, while worthwhile, also comes up short from time to 
time. But that said, these tools also provide some very handy features, even if you’re writing a 
lot of the HTML yourself: 

■ A “code” window for entering HTML and CSS with syntax checking to catch 
common mistakes and suggest common names and attributes as you type. 

■ A preview-and-publish functionality that allows you to test pages before making 
them “live” on the Web. 

■ A site manager that allows you to organize your site, and also keeps your local 
changes in synch with your website on the server. Note that this usually takes care of 
all the FTP work for you. 

■ Some provide built-in validation, so you know your page is valid as you develop it. 

These tools are also not without their downsides: 

■ Sometimes these tools lag behind standards in terms of support, 
so to keep your HTML and CSS current, you may need to write 
(or edit) the HTML yourself. 

■ Not all of these tools enforce strict standards, and may allow 
you to get sloppy with your HTML and CSS, so don’t forget to 
validate if the tool doesn’t provide built-in validation. 

Keep in mind that you can use a combination of simple editors along with these 
more sophisticated tools; one solution doesn’t have to fit all your needs. So use a 
page creation tool when it makes sense. 


Some tools to consider 


Dreamweaver (Adobe) 

Hype (Tumult) 

Coda (Panic) 

Microsoft Expression Web 
Flux (The Escapers) 

Amaya (Open source, developed by the W3C) 
Eclipse (by the Eclipse Foundation) 
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what can you do with xhtml? 


«8 XHTML5 

We were pretty tough on XHTML in this book, with the whole 
“XHTML is over” thing. The truth is, when it comes to XHTML, it is 
only XHTML 2 and later that has died, and in fact, you can write your 
HTML5 using XHTML style if you want to. Why would you want 
to? Well, you might need to validate or transform your documents as 
XML, or you might want to support XML technologies, like SVG (you’ll 
probably know if you do), that work with HTML. 

Let’s look at a simple XHTML document and then step through the high 
points (we couldn’t possibly cover everything you need to know on this 
topic; as with all things XML, it gets complicated fast). 




Same dod-tyfc! 


This is )</\/IL; y/c add 4a 七 is 

ky>ovm as a 


<!doctype html> 

<html xmlns="http : //www.w3.org/1999/xhtml n > 

<head> 

<t±tle>YOU ROCk!</t±tle> /All ele^-U ^ave -to be .ell Wd ； iKe 

<meta charset="UTF-8" /> /> b> tlosc void element TKaVs )<ML ； 




-fovma-t -fov dosnr>3 a void *ta5' 


</head> 

<body> 

<p>I'm kinda liking this XHTML!</p> 

<svg xmlns= n http : //www.w3.org/2000/svg n > 

<rect stroke= M black M fill="blue n x= n 45px n y="45px n 

width="20Opx" height="10Opx M stroke-width= n 2" /> 

</svg> 


</body> 

</html> 


We ddr> embed )(ML \rijK-b *tKc 
K’mda tool 


ar\ example, v/cVc 

£\/^ bo dv-a>M a 

m*fco ouv- pay. The details 
avc^*t is 

IS *tKa*t 七 WlS ’IS 
a 的 )<ML -fovrwa*t 七 Iwcs 
msidc y/V|L •，灼 。七 ftT/VIL- 


Now here’s a few things you need to consider for your XHTML pages: Clos'm^ dll Y ouV " clcrwCht, quotes 

/ dV"ouy>d att/ibu 七 e values, valid y>es 七 

■ Your page must be well-formed XML. ^C ： ^ c lcmcr>is ; a^d all 七七 

■ Your page should be served with the application/xhtml+xml 
MIME type; for this, you’ll need to make sure your server is serving 
this type (either read up on this or contact your server administrator). 

■ Make sure to include the XHTML namespace in your <html> 
element (which we’ve done above). 


Like we said, with XML there’s a lot more to know and lots of things to 
watch out for. And, as always with XML, may the force be with you … 
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# 9 Server-side scripting 

Many web pages are generated by applications running on a server. For example, think about 
an online order system where a server is generating pages as you step through the order process, 
or an online forum, where there’s a server generating pages based on forum messages that are 
stored in a database somewhere. We used a server application to process the form you created 
in Chapter 14 for the Starbuzz Bean Machine. 

Many hosting companies will let you create your own server applications by writing server-side 
scripts and programs. Here’s a few things server-side scripting will allow you to do: 

■ Build an online store complete with products, a shopping cart, and an order system. 

■ Personalize your pages for each user based on his or her preferences. 

■ Deliver up-to-date news, events, and information. 

■ Allow users to search your site. 

■ Allow users to help build the content of your site. 

To create server applications, you’ll need to know a server-side scripting or programming 
language. There are a lot of competing languages for web development, and you’re likely to get 
differing opinions on which language is best depending on who you ask. In fact, web languages 
are a little like automobiles: you can drive anything from a Prius to a Hummer, and each has its 
own strengths and weaknesses (cost, ease of use, size, economy, and so on). 

Web languages are constantly evolving; PHP, Python, Perl, Node.js, Ruby on Rails, and 
JavaServer Pages JSPs) are all commonly used. If you’re new to programming, PHP may be 
the easiest language to start with, and there are millions of PHP-driven web pages, so you’d 
be in good company. If you have some programming experience, you may want to try JSPs 
or Python. If you’re more aligned with the Microsoft technologies, then you’ll want to look at 
VB.NET and ASP.NET as a server-side solution. And, if JavaScript is your gig, then check out 
Node.js for a whole new approach. 
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# 10 Audio 


HTML gives you a standard way to play audio in your pages, without 
a plug-in, with the <audio> element. You’ll find this element quite 
similar to the 〈 video 〉 element: 

<audio src="song.mp3 n id="boombox" controls 〉 

Sorry but audio is not supported in your browser. 
</audio> 



Look Wili 沘？ Yes, audio 
supj>o\rts sinnilav -Puh^tiohali-ty as 
video (mihus the video, obviously). 


Also like video, each browser implements its own look and feel for 
player controls (which typically consist of a progress bar with play, 
pause, and volume controls). 

Sadly, like video, there is no standard encoding for audio. Three 
formats are popular: MP3, WAVJ and Ogg Vorbis. You’ll find that 
support for these formats varies across the browser landscape (as 
of this writing, Chrome is the only browser that supports all three 
formats). 

Despite its simple functionality, the < audio 〉 element and its 
JavaScript API give you lots of control. Using the element with 
JavaScript, you can create interesting web experiences by hiding the 
controls and managing the audio playback in your code. And with 
HTML5, you can now do this without the overhead of having to use 
(and learn) a plug-in (like Adobe Flash). 
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Symbols 

&amp abbreviation, 112—113 
& (ampersand) for entities, 113 
/* and */ for comments in CSS, 285 
<! ― and —> for comments in HTML, 6 
<>(angle brackets), 25 
<code> element, 114 
: (colon) in CSS rules, 259 
..(dotdot) syntax for paths, 64—65 
M M (double quotes) 

for parent folders, 65 
<q> element and, 86-87 
@font-face rule, 322-325 
/ (forward slash) 

in closing tags, 26 
for paths, 64-65 

# (hash symbol) for id selectors, 395 
@media rules (CSS), 401， 405 
;(semicolon) in CSS rules, 259 
I ] (square brackets) in form element names, 675 

A 

<a> elements 

changing styles of, 452-453 
creating links from elements in HTML5, 153 
creating links with, 48—49 
in lounge.html, 47 
states of, 466 
absolute layouts, 522 
absolute paths, 136—137 ， 145, 159 
absolute positioning, 504-510, 528-529, 536-537 
action attribute, 650—651, 661， 692 
active link state, 453 


alt attribute, 173, 211, 242 

angle brackets (< >), 25 

anti-aliasing text, 210 

Applications folder, 12 

application/xhtml+xml MIME type, 708 

<article> element, 562-564, 572-573, 595 

<aside> element, 551, 595 

attributes 

attribute selectors, 698 
of elements, 29, 51-53 
matching to elements, 52 
in opening tags, 36 
〈 audio 〉 element, 710 
“auto” margins, 502 
autoplay attribute (<video>), 583, 584 

B 

backgrounds 

background-color property, 618, 634 
background-image property, 380-383, 405 
background-position property, 383, 405 
background-repeat property, 383, 405 
colors (web pages), 206, 210 
block elements 

flowing, 473-478, 537 
planning pages with, 115 
〈 blockquote 〉 elements, 90-95, 92 
<body> tags, 8, 23-24 
bold text, 335—336 
borders 

adding to <div> element structure, 424—433 
border-bottom property, 265-266, 354 
border-collapse property, 616, 634 
border-color property, 387, 389 
border-radius property, 388, 405, 411 
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borders, continued 

border-spacing (cells), 634 
border-spacing property, 516, 616, 639 
border-style property, 386 
border-width property, 387 
bottom, 265 

box model and, 369-370, 377-379, 387 
displaying in browsers, 31 
shorthand for, 442—445 
specifying corners of, 388 
bottom property, 504 
box model (CSS), 367—372 
<br> elements, 96—99, 115 
broken images in browsers, 215 
browsers, web. See web browsers 

c 

<caption> element, 634 
captions (HTML tables), 609-610 
cd (change directory) command, 130 
cells, table, 634 
character encoding, 238-240 
character entities, 112—113, 115 
charset attribute (<meta> tags), 239, 249 
checkbox controls, 692 

checkbox <input> element, 653, 663, 673—674 

checked attribute (forms), 695 

Chrome, 16 

class attributes, 301 

classes 

adding elements to, 286-291 
class attributes, 392—397 
placing <div> elements into, 421 
clear property, 495-497, 537 
closing tags, 25 
codecs, 589, 590-592 
collapsing borders, 616 


colors 

adding to HTML tables, 618-620 
background (web pages), 206, 210 
“color” type attribute, 692 
color <input> element (forms), 656 
Color Pickers, 206, 348-349 
color property (CSS), 262, 313 
of headings, changing, 439 
naming, 343 

web colors. See web colors 
colspan attribute, 624, 634 
comments 

CSS, 285 
HTML, 6 

container file format, 589 
content area (box model), 368, 371 ， 372, 405 
Content Delivery Network (GDN), 591 
controls attribute (video), 584 
CSS (Cascading Style Sheets) 
box model, 367-372 
cascade, 458-463 
comments in, 285 

comparing languages with HTML, 294-295 
CSS Pocket Reference, 260, 445 
CSS table displays 
creating, 510-520 
laying out forms with, 682—685 
layouts, 522 
errors in, 297 
vs. HTML, 34-35 

inheriting styles from parent elements, 281—285 

linking pages to external stylesheets, 273—277 

properties overview, 300 

rules, 36, 259—260, 301 

selectors, 698-699 

<style> element, 29—32, 261—263 

style definitions, 42 

styling forms with, 686—687 

styling upgrade project, 362-365 

transforms and transitions, 701-702 
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updating for HTML5 elements, 554 
validating, 298—299 
vender-specific properties, 700 
cursive fonts, 315 

D 

data transfers (hosting), 125 
“date” type attribute, 692 
date <input> element (forms), 657, 671-672 
datetime attribute, 565—566 
default.htm files, 138-139, 159 
definition lists, 106 
<del> element (HTML), 353 
descendant selectors, 437-439, 466 
dir command, 131 
directions.html, 54 
directories (folders), 130 
display: table property, 516 
<div> element (HTML) 
adding styles to, 424—433 
defined, 466 

dividing pages into sections with, 417—422 
line-height property and, 440 
new HTML5 elements and, 595 
doctype definitions, 225-227, 229-230, 249 
domain names, 126-128, 159 
Dreamweaver, 6 

E 

editors, text, 16 
elements 

adding to classes, 286-291 
basics, 25-26, 36 
defined, 25 

floating, 479-482, 487-490, 497, 525-529 

form, 652—657 

height of, 430 

linking to with IDs, 151 


multiple rules for, 267 
nesting, 107-109 
new in HTML5, 547—550 
selecting by siblings, 699 
structure, 36 

styling based on state, 453-454 
elixir.html, 54 

<em> element, 92, 114, 338 
<email> element (forms), 663 
email <input> element (forms), 657 
Embedded OpenType fonts, 325 
em units for sizing fonts, 329, 334 
encoding 

character, 238-240 
formats (video), 586-587 
entities, character, 112-114 
executable content in web pages, 703 
external stylesheets, 273—277, 301 

F 

fantasy fonts, 315 
<fieldset> element, 689, 692 
files 

creating in Mac ， 12—13 
creating in Windows, 14-15 
extensions, 15 

file <input> element (forms), 690 
“file:///” protocol, 145 
file protocol, 159 
organizing in folders, 56—59 
transferring to server root folder, 129—133 
Firefox, 16 

: first-child pseudo-class, 454 
: first-letter pseudo-element, 698 
: first-line pseudo-element, 698 
fixed position elements, 537 
fixed positioning, 506, 531-534, 536 
Flash video, 592 
floated elements, 537 


you are here ► 


713 




the index 


floating 

elements, 525-529 

float property, 472, 478-482, 487-490 
inline elements, 497 
layouts, 521, 525-526 
flowing block/inline elements, 473—478 
flow of elements, 537 
: focus pseudo-class, 453 
folders 

organizing files/images in, 56—59 
for thumbnails, 192 
fonts (CSS) 

changing weight of, 335—336 
colors, background vs. font, 349 
families of, 355 
@font-face rule, 322-325 
font-family property, 279—280 
for Mac/Windows, 321 
properties, 312—313 
shorthand for, 444 
sizing, 328-334 
styling, 337—339 
Web Fonts, 325-327, 706 
footers 

〈 footer〉element (HTML5), 551, 595 
laying out, 493—496, 499 
formats 

image, 167 
video, 586-591 
forms, HTML 

action attribute, 650, 661, 665, 692 
adding checkboxes/text area to, 673—674 
adding fieldsets/legends to, 689 
adding <input> elements to, 664-666, 671-675 
adding <label> elements for accessibility, 688 
adding password <input> element to, 689 
basics, 646—649 

commonly used elements, 652-657 
file <input> element, 690 
<form> element, 649—651, 660—663, 692 
GET vs. POST methods, 678—680 


laying out with CSS table display, 682—685 
multiple choice menus, 690 
name attribute, 662 
placeholder attribute, 691 
required attribute, 691 
server scripts, 646—647, 650—652, 660, 663 
styling with CSS, 686—687 
frozen layouts, 501—502, 537 
FTP (File Transfer Protocol), 129—132, 159 

G 

get <filename > command, 131 
GET method, 678-680, 692 
GIF image format, 167—168, 172, 211 
Google Web Fonts, 325-327, 706 
Guide, HTML, 245-246 

H 

<hl> element (headings), 22 

<h2> element (subheadings), 8, 22 

〈 head 〉 element, 8, 23-24, 36 

〈 header 〉 elements, 551, 568-571, 572-573, 595 

header images, 523-524 

Head First HTML5 Programming, 6, 52, 231, 593, 705 

Head First learning principles, xxviii 

Head First Lounge project, 4-5 

Head First Mobile Web, 403 

headings 

changing color of, 439 
levels of, 6 
height properties 

attribute, 174, 584 
CSS box model and, 366, 371 
of elements, 430 
property, 570 

hex code (colors), 32, 345-347, 349, 355 
“Hide extensions for known file types” option, 15 
hosting companies, 125, 159 
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hover state, 453-454 
href attribute 

basics (interview), 53 
relative paths in, 59 
specifying link destination with, 48—51 
HTML5 

APIs and web apps, 704-705 
browser support for, 553 
building blog with new elements, 562—569 
vs. HTML4.01, 555-556 
new elements in, 546-550, 594, 595 
specification 
doctype, 227 
overview, 231， 242 

HTML (Hypertext Markup Language) 
basics, 4 
comments, 6 

creating tables with. See tables, HTML 

creating web page, 9—1 1 ， 17—22 

vs. CSS, 34-35 

forms. See forms, HTML 

guidelines for well-formed pages, 245-246 

Guide to, 245-246 

.html extension, 14 

<html> tag, 6, 23 

HTML & XHTML: The Definitive Guide (O’Reilly )， 
52 

incorporating CSS into, 259-260 

language vs. CSS, 294-295 

legacy elements, 247 

living standard, 228 

marking up page structure, 38—41 

overview, 2—3 

readability of, 6 

saving, 18 

structure for table displays, 512—514 
structuring text with tags, 21—23 
version history of, 222—225 
HTTP (HyperText Transfer Protocol), 135, 159 
hypertext links. See links 



id attribute, 150-153, 392—397, 405, 418 

“Ignore rich text commands in HTML files” option, 13 

images 

adding logo to myPod application, 202—209 

broken images in browsers, 215 

browser handling of, 164—166 

fixing broken, 66—68 

formats, 167, 211 

<img> element, 55, 170—172, 381 

<img> elements, 211 

as links, 211 

organizing in folders, 57—58 
quality of, 187 

sizing/resizing, 174, 178, 183—184 
using as list markers, 632—633 
limportant, 459, 461 

index.html file, 11, 18, 138—139, 159, 176 
inherited properties, 301， 464 
inheriting styles, 281-285 
inline elements 
basics, 94-95 
flowing, 473—478, 537 
<q> and <em>, 115 
setting properties on, 450 

<input> elements (forms), 652-653, 656-657, 664-667, 
670—674 

<ins> element, 353 
Internet Explorer, 16 
italic style text, 337—339 



JavaScript, 703 

jello layouts, 502-503, 521, 537 
JPEG images, 167-168, 172, 211 
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K 

keywords for sizing fonts, 330, 334 



labels 


〈 label 〉 elements, 688, 692 
labeling <div> with id attribute, 418 
link, 148 

:last-child pseudo-class, 454 
layouts, CSS, 521—523 
leading (text), 366 
left property, 504 
legacy HTML elements, 247 
〈 legend 〉 element, 689 
<li> elements, 101—106 
lighter font-weight property, 335 
linebreaks, 95 

line-height property, 365-366, 405, 440 

<link> element, 275-277, 301 

links 

adding titles to, 147-149 

Head First Lounge example, 44-50 

:link pseudo-class, 455 

linking into parent folders, 63—65 

linking into subfolders, 60—62 

linking to new windows, 155-157 

linking to points in pages, 149-152 

linking within pages, 153 

link labels, 148 

link states, 453 

to other websites, 142-145 

relative, 154 

turning thumbnails into, 196—200 
liquid layouts, 501—502, 537 
lists 

list-style-image property, 632 
list-style-position property, 633 
list-style-type property, 631 


loop attribute (video), 584 
lossy/lossless formats (images), 167-168 
lounge.html, 54, 66 

M 

Mac OS X 

creating HTML files in, 12—13 
FTP applications for, 132 
specifying fonts for, 321 
margins 

box model and, 369, 371-372, 377—379 
margin-right property, 385 
settings for, 405 
shorthand for, 442—445 
markers, list, 631-632 
matching tags, 25 
matte color, setting, 206—207 
Matte option 

in Photoshop Elements, 210 
in “Save for Web’’ dialog box, 205 
max-device-width property, 400, 404, 412 
max-width property, 404, 412 
@media rules (CSS), 401 
media attribute, 400 
media queries, 401-402 
<meta> tags, 239—240, 249 
metacognition ， xxix—xxxi 
method attribute (forms), 650, 692 
MIME type, 590 

min- device - width property, 400, 404, 412 
min-width property, 404, 412 
mismatching tags, 109—110 
mission.html page, 33 
mkdir (make directory) command, 131 
monospace fonts, 315 
MP4 containers, 586—587 
multiple attribute (forms), 690 
multiple classes, 291 
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multiple custom fonts, 327 

multiple links to stylesheets, 463 

multiple stylesheets, 399—400 

myPod application (images), 175-177, 188-191 

N 

name attribute (form element), 662—663 
naming 

classes/ids, 397 
colors, 343 

<nav> element (HTML5), 575-577, 595 
navigating multiple pages, 573-577 
negative property values, 533—534 
nesting 

<div> elements, 420, 466 
elements, 107-109 
lists, 115 
nested tags, 26 
tables, 634 

normal keyword, 445 
Notepad, 14 

: nth-child pseudo-class, 619, 634 

“number” type attribute, 692 

number <input> element (forms), 656, 671—672 

0 

oblique style text, 337—339 
Ogg container, 586-587 
<ol> element, 103—106 
online color charts, 349 
“Open and Save’’ tab, 13 
opening tags, 25 
OpenType fonts, 325 
Opera, 16 

<option> element (forms), 655, 663, 666, 692 
ordered lists, 102—105 ， 115, 633 
orientation property, 400 
overriding style inheritance, 284—285 


P 

<p> elements, 55, 101 
<p> tags, 8, 22 
padding 

basics, 405 

box model and, 368, 371-372, 377—379 
padding-left property, 384 
shorthand for, 442—445 
paragraphs 
linking, 55 

styling independently (box model), 375-383 
parent folders, linking into, 63—65 
password <input> element, 689 
paths (links) 

absolute, 136—137, 145 
planning, 60—65 
relative, 137, 145 
percentages 

positioning elements with, 506 
sizing fonts with, 328—329, 334 
photo images, size of, 211 
Photoshop Elements 

finding web colors with, 348—349 
Matte color menu in, 211 
resizing images with, 181 
pixels 

pixel resolutions, 179—180 
sizing fonts with, 328 
placeholder attribute (forms), 691, 692 
“Plain text”，13 

PNG images, 167-168, 172, 203-205, 211 
ports, 145 

position property, 504-507, 537 
poster attribute (video), 584 
POST method, 678-680, 692 
<pre> element, 114 
Preferences ， TextEdit, 13 
preload attribute (<video>), 584 
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properties 
CSS, 300 
of fonts, 312—313 
inherited, 301, 464 
list-style (CSS), 634 
shortcuts for, 466 

pseudo-classes, 454-456, 466, 619 
pseudo-elements, 698 
put <filename> command, 130 
pwd command (FTP), 131 

<q> elements, 86-88, 92, 117 

R 

radio buttons, 692 

radio <input> element, 653, 663, 668 

ragged borders, 389 

“range” type, 692 

range <input> element, 656 

relative font sizing, 328—329 

relative links, 154 

relative paths 

absolute paths and, 137 
basics, 69-71 

grand challenge solutions, 75-76 
vs. URLs, 145, 159 
relative positioning, 506, 536, 537 
reload button (browsers), 24 
required attribute, 692 
required attribute (forms), 691 
RGB color values 

specifying in CSS, 344 
web colors and, 340-342 
right property, 504 
root folders (server), 129—133 


rows (HTML tables) 

adding color to, 618-620 
cells spanning multiple, 622—624 
columns and, 607 
rules, CSS 

cascade and, 459 

combining, 264 

ordering of, 293, 459 

overriding inherited styles with, 284—285 

syntax, 259—260 

writing for multiple elements, 264—266 



Safari, 16 

sans-serif fonts, 314, 320 
saving 

HTML, 18 
images, 187 

“Save for Web” option, 183-184, 187, 204 
screen readers, 157 
<script> element, 703 
scripting, server-side, 709 
〈 section 〉 element, 562-564, 572-573, 595 
〈 select 〉 element, 692 
selecting 

elements by siblings, 699 
elements with ids/classes, 395 
〈 select 〉 element, 655, 663, 665-667 
selectors (CSS) 
basics, 267 
class, 288 

combining, 698—699 
descendant, 437-439 
serif fonts, 314, 320 
server-side scripting, 651, 709 
SFTP (Secure File Transfer Protocol), 132 
shortcuts, property, 466 
shorthand, CSS, 442-445 
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sidebars, laying out, 488—490, 499 
sizing/resizing 

fonts, 312, 328-334 
images, 174, 178-184, 183-185 
〈 source 〉 element, 589-591 
<span> element (HTML), 448—450, 466 
special characters, 112—113 
specificity, calculating, 460—461 
src attribute (CSS), 68—69, 170, 21 1 ， 582, 584 
Starbuzz Coffee project 
adding CSS to, 30—33 
basic structure with HTML tags, 21 
creating web page, 11—12 
loading content into browser, 17 
markup, 38 
structure, 10 
states of links, 453 
static positioning, 506, 536, 537 
〈 strong 〉 element, 114 
styles 

guide to applying, 292—293 
inheriting from parent elements, 281—285 
<style 〉 element, 29—32 
<style 〉 element, placing, 36 
<style> tags, 261—263, 301 
stylesheets, multiple, 399—400, 405 
styling fonts, 337—339 
subfolders, linking into, 60—62 
subheadings, HTML, 22 
submit buttons, 692 

submit <input> element (forms), 652, 663 
SVG fonts, 325 

T 

〈 table> element (HTML), 634 
tables, HTML 

adding captions to, 609-610 
adding color to, 618-620 


adding styles to, 612—616 
cells spanning multiple rows, 622—624 
collapsing borders, 616 
creating, 603-607 
CSS table displays, 537, 607 
pasting into web pages, 611 
styling lists in, 631—633 
tags, HTML 
basics, 25-42 

in Head First Lounge project, 5-6 
matching, 25 
mismatching, 109—110 
nested, 26 

Starbuzz Coffee project, 21 
starting and ending, 26 
structuring text with, 21—23, 39—41 
target attribute, 156—157, 159 
<td> element, 604—606, 624, 634, 641 
tel <input> element (forms), 657, 663 
text 

anti-aliasing, 210 
editors, 16 

flowing onto web pages, 478 
fonts. See fonts (CSS) 
text-align property, 431—433, 466, 634 
<textarea> element (forms), 654, 663, 673, 692 
text-decoration property (CSS), 267, 313, 353, 355 
TextEdit (Mac), 12-13 
text <input> element, 652, 692 
wrapping around list markers, 633 
<th> element (HTML), 604—606, 634 
thumbnails, 192-196, 211 
<time> element, 114, 565—566, 595 
<title> element, 8, 23—24 
title attribute (<a> element), 147—149 
tooltips, 153 
top property, 504 
<tr> element, 604—606 
transforms and transitions (CSS), 701-702 
transparency in images, 204-205, 210 
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TrueType fonts，325 
type attribute, 51, 652 

u 

<ul> element, 103—106 ， 118—119 
underlining text, 267 
Unicode, 112—113, 239 
unordered lists, 102-105, 633 
URLs (Uniform Resource Locators) 
basics, 134 
defined, 159 
for images, 171—172 
<url> element (forms), 663 
url <input> element (forms), 657 
UTF-8 encoding, 18, 239, 249 

V 


displaying HTML in, 3—4 
displaying HTML tables, 605 
displaying HTML video, 585 
handling of forms by, 647 
handling of images by, 164—166 
HTML version support, 228 
interpreting HTML, 5—6 
loading content into, 17-19 
opening pages in, 19 
resizing images to fit in, 180—186 
selecting, 16 

supporting HTML5, 553 
whitespace and, 36 
web colors 

basics, 340-342 
creating, 355 
finding, 348—349 
specifying, 343-347 
Web Fonts, 325-327, 706 


validating 

CSS validator, 298—299 
W3C Validator, 233—240 
value attribute (forms), 663, 692 
vendor-specific CSS properties, 700 
vertical-align property, 516, 520, 634 
〈video > element (HTML5) 
attributes, 584 
basics, 580-583 
formats, 586-591 
: visited pseudo-class, 455 
void elements, 98-99, 115, 172 

¥ 

W3C Validator, 233-238, 249, 298-299 
web applications, HTML5 for, 242 
web browsers 
basics, 3 

broken images in, 215 
built-in default styles, 28 
choosing, 16 


web forms. See forms, HTML 
WebM container, 586-587 
web pages 

adding executable content to, 703 
applications for creating, 707 
dividing into sections with <div> element, 417—422 
how the web works, 2—6 
linking to external CSS stylesheets, 273—277 
opening in browsers, 19 
setting background color, 206 
structure of, 115 
web pages, constructing 

adding 〈 blockquote 〉 elements, 90-94 
adding <br> element, 96—99 
adding <q> element, 86-88 
outline, 81 
overview, 79 
rough design sketch, 80 
testing page, 84 
web servers 
basics, 3 

editing files on, 132 
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moving files to root folder on, 128—131 
port 80 and, 145 
requests from browsers, 138 
root folder, importance of, 129 
submitting forms to, 646—647 
websites for further information 
character encoding, 239 
GSS3 Media Queries specification, 403 
domain names, 126—127 
FTP applications, 132 
hosting companies, 125 

symbol/foreign character abbreviations, 112—113 
W3C validator, 233 
Web Fonts, 327 

weight property (CSS fonts), 335—336 
WHATWG and W3C，591 
whitespace, use of, 36 
width attribute 
images, 174 
video, 584 


width property 
basics, 426-430 
borders and, 387 
CSS box model and, 369, 371 
height of columns and, 520 
setting for elements, 466 
windows, linking to new, 155—157 
Windows, Microsoft 

creating HTML files in, 14—15 
FTP applications for, 132 
specifying fonts for, 321 
World Wide Web Consortium (W3C), 249 

X 

XHTML, 99 
XHTML5, 708 
XML, 223, 225, 708 

z 

z-index property, 505—506, 537 
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All interior layouts were designed by Eric Freeman and Elisabeth Robson. 

The book’s look and feel was based and extended from the original design by Kathy Sierra and Bert Bates 
The book was produced using Adobe InDesign CS5 and Adobe Photoshop CS. The book was typeset using 
Uncle Stinky, Mister Frisky (you think we’re kidding), Ann Satellite, Baskerville, Comic Sans (can you believe 
it?), Myriad Pro, Skippy Sharp, Savoye LET, Jokerman LET, Courier New, and Woodrow typefaces. 

Interior design and production all happened on two Mac Pros and two MacBook Airs. 

Writing locations included: Bainbridge Island, Washington; Portland, Oregon; Seaside, Florida; Lexington, 
Kentucky. Long days of writing were powered by zero caffeine and Brew Dr. Kombucha, and the sounds of 
Foster the People, B-52s, Duran Duran, David Bowie, William Shatner, Elvis Presley, Pink Floyd, Genesis, 
Simple Minds, Ratt, Skid Row, Men without Hats, Men at Work, Berlin, Steve Roach, Tom Waits, Beyman 
Brothers, and a heck of a lot more 80s music than you’d care to know about. 
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This isn’t goodbye 

Bring your brain over to 
wickedlysmarL com 


Don’t you know 
about the website? We’ve 
got answers to some of the 
questions in this book, guides to 
how to do more, and daily updates 
on the blog from the authors! .^ 









